在元素中查找文本字符串并在其周围包裹一些span标记

Question

在元素中查找文本字符串并在其周围包裹一些span标记

我想在元素中找到一串文本，并围绕它包裹一些span标签。例如

从：

<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

另一种方法，按关键字拆分并加入更新后的html。$("h2:contains('cow')").html(function(_,&nbsp;html)&nbsp;{ &nbsp;&nbsp;&nbsp;return&nbsp;html.split('cow').join("<span&nbsp;class='smallcaps'>cow</span>");});注意：我没有对此进行过测试，但我认为这会比进行替换更糟糕，但是我会将其包含在内以供参考之用

Answer 2

这是@ undefined的答案的变体，它循环遍历一系列项目：var&nbsp;barnyardArray&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;'cow', &nbsp;&nbsp;&nbsp;&nbsp;'horse', &nbsp;&nbsp;&nbsp;&nbsp;'chicken', &nbsp;&nbsp;&nbsp;&nbsp;'hog', &nbsp;&nbsp;&nbsp;&nbsp;'goat', &nbsp;&nbsp;&nbsp;&nbsp;'goose', &nbsp;&nbsp;&nbsp;&nbsp;'duck', &nbsp;&nbsp;&nbsp;&nbsp;'llama'];$.each(barnyardArray,&nbsp;function&nbsp;(index,&nbsp;value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$("p:contains("&nbsp;+&nbsp;value&nbsp;+&nbsp;")").html(function&nbsp;(_,&nbsp;html)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;regex&nbsp;=&nbsp;new&nbsp;RegExp(value,&nbsp;'g'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;html.replace(regex,&nbsp;'<span&nbsp;class="smallcaps">'&nbsp;+&nbsp;value&nbsp;+&nbsp;'</span>'); &nbsp;&nbsp;&nbsp;&nbsp;});});