在元素中查找文本字符串并在其周围包裹一些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(_, html) {
   return html.split('cow').join("<span class='smallcaps'>cow</span>");});

注意：我没有对此进行过测试，但我认为这会比进行替换更糟糕，但是我会将其包含在内以供参考之用

Answer 2

这是@ 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>');
    });});