在元素中查找一个文本string，并在其周围包裹一些span标签

我想在一个元素中find一个文本string，并在它周围包裹一些span标签。 例如：

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

我试过了：

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

但是，这只包含整个包含h2标签。

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>"); }); 

注意：我没有testing过这个，但是我认为这样做会比做replace更糟糕，但是为了提供信息，我会包括反正

Answer 3

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

Answer 4

在我的情况下，我有一些标签里面的目标div和一些文字，我需要将文字包装成一个链接。

这是我做了如下“你有什么尝试”。

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