javascript - 分割された文字列の部分文字列を要素でラップする

Question

$('td.created')javascript / jqueryを使用してすべてを選択し、HTMLを分割してから、各セクションをスパンタグでラップするにはどうすればよいですか<br>（スタイルを設定するためにクラスをspan：firstに追加できるようにします）。

返される文字列の形式は次の$('td.created').html()ようなものです。

posted by User123 <br> Posted on 1/2/12 at 4:15PM

Answer 1

考えられるユニバーサルソリューション（2行だけで機能するわけではありません）：

$("td.created").each(function() {
    var text = this.innerHTML.split("<br>");
    for (var i = 0; i < text.length; i++) {
        var span = $("<span />").html(text[i]);
        if (i == 0) span.addClass("first");
        span.appendTo("#element");
    }
});​

デモ：http： //jsfiddle.net/7xQAL/

Answer 2

$('td.created').each(function(i, html) {
    var newHtml = $(this).contents(),
        spans = [];
    newHtml.each(function() {
        var html = (this.nodeName.toLowerCase() == 'br') ? '<br>' : '<span>' + this.textContent + '</span>';
        spans.push(html);
    });
    $(this).html(spans.join(''));
});

デモ（DIVコンテナを使用） http://jsfiddle.net/PVLek/