javascript - javascript/jquery を使用して、文字列内の特定の文字にスパン タグを追加します。

Question

文字列内の特定の文字にスタイルを追加する必要がある CMS からの出力があります。たとえば、私の出力は次のとおりです。

 <div class="date">12 // 14 // 2013</div>

どうすれば追加できますか:

<span style="slashColor"> 

私の結果は次のようになります。

<div class="date">12 <span class="slashColor">//</span> 14 <span class="slashColor">//</span> 2013</div>

Answer 1

これを試して：

var original = $('.date').text();
var new_version = original.split('//').join('<span class="slashColor">//</span>');
$('.date').html(new_version);

フィドル

投稿した例のように多くの div がある場合は、これを使用できます。

$('.date').each(function () {
    var original = $(this).text();
    var new_version = original.split('//').join('<span class="slashColor">//</span>');
    $(this).html(new_version)
});

フィドル

Answer 2

var elements = document.getElementsByClassName('date');
for (var i = 0, e; e = elements[i++]; ) {
   e.innerHTML = e.innerHTML.replace(/\/\//g, '<span class="slashColor">//</span>');
}

またはjQuery方法：

$('.date').each(function () {
  $(this).html($(this).html().replace(/\/\//g, '<span class="slashColor">//</span>'));
}