jQuery заменяет дефисы интервалами для заголовка даты блоггера

Question

Я ищу, чтобы настроить заголовок даты по умолчанию в блоггере с помощью jQuery.

Исходный вывод:

<h2 class='date-header'>2011-01-20</h2>

Я хочу обернуть YYYY, MM и DD в промежутки, чтобы я мог манипулировать ими как дочерними узлами.

Результат будет:

<h2 class='date-header'><span class="dhy">2011</span><span class="dhm">01</span><span class="dhd">20</span></h2>

Каждая моя попытка добавляет дополнительные теги, так что это вложенный беспорядок.

У кого-нибудь есть хорошее решение?

Answer 1

Вот хорошее функциональное решение:

$('.date-header').html(function() {
    var txt = $(this).text();
    var classes = ['dhy', 'dhm', 'dhd'];
    $(this).html($.map(txt.split(/-/), function(val) {
        return $('<span/>', {'class': classes.shift()}).text(val)[0];
    }));
});

http://jsfiddle.net/ThiefMaster/WdRAw/

Answer 2

Если он всегда имеет один и тот же формат YYYY-MM-DD, вы можете использовать split, чтобы получить элементы, пройти через них, создать выходной HTML, а затем добавить его в качестве HTML h2.

$(function()
{

   $(".date-header").each(function()
   {

      var arrDate = $(this).text().split("-");

      var strOut = '<span class="dhy">'+arrDate[0]+'</span>-';
      strOut+= '<span class="dhm">'+arrDate[1]+'</span>-';
      strOut+= '<span class="dhd">'+arrDate[2]+'</span>';

      $(this).html(strOut);

   });

});

И скрипка: http://jsfiddle.net/ahallicks/xGa2J/2/

Answer 3

Я думаю, что это должно сделать это:

var header = $('.date-header');
var d = header.text().split('-');
header.html('<span class="dhy">' + d[0] + '</span><span class="dhm">' + d[1] + '</span><span class="dhd">' + d[2] + '</span>');