在一个元素中找到一个文本字符串，并用一些span标记将它括起来

Question

我想在一个元素中找到一个文本字符串，并用一些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

$("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

这是@undefined答案的一个变体，它循环遍历一组项目：

var barnyardArray = [
    'cow',
    'horse',
    'chicken',
    'hog',
    'goat',
    'goose',
    'duck',
    'llama'
];

$.each(barnyardArray, function (index, value) {
    $("p:contains(" + value + ")").html(function (_, html) {
        var regex = new RegExp(value, 'g');
        return html.replace(regex, '<span class="smallcaps">' + value + '</span>');
    });
});