jquery - Find a string of text in an element and wrap some span tags round it

Question

I want to find a string of text in an element and wrap some span tags round it. E.g.

From:

<h2>We have cows on our farm</h2>

To:

<h2>We have <span class='smallcaps'>cows</span> on our farm</h2>

I've tried:

$("h2:contains('cow')").each(function() {
 $(this).text().wrap("<span class='smallcaps'></span>");
});

But that only wraps the whole containing h2 tag.

Answer 1

$("h2:contains('cow')").html(function(_, html) {
   return html.replace(/(cow)/g, '<span class="smallcaps">$1</span>');
});

http://jsfiddle.net/w5ze6/1/

Answer 2

キーワードで分割し、更新された html と結合する別のアプローチ。

$("h2:contains('cow')").html(function(_, html) {
   return html.split('cow').join("<span class='smallcaps'>cow</span>");
});

注：私はこれをテストしていませんが、これは置換を行うよりもパフォーマンスが悪いと想定していますが、情報提供のためにとにかく含めると考えています

Answer 3

私の場合、ターゲット div 内にいくつかのタグがあり、そのテキストをリンクにラップする必要があるテキストがあります。

これは、「何を試しましたか」に従って行った方法です。

var oldText = $(this).text(),
newText = $(this).html().replace(
    oldText, 
    "<a class='k-link' href='#' class='smallcaps'>" + 
        oldText + 
    "<span class='k-icon k-i-arrow-n'></span></a>"
);
$(this).html(newText);

Answer 4

$("h2:contains('cow')").each(function() {
    var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
    $(this).html(newText);
});