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

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

Answer 4

您通常希望以不区分大小写的方式匹配一些任意文本。有时，搜索查询包含特殊的正则表达式元字符的字符，必须在编译模式之前进行转义。

使用类似的解决方案

var words = ["cows", "c++", "$var$"];
$("h2").html(function(_, html) {
   return html.replace(new RegExp(words.map(function(x) { 
       return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
     }).join('|'), "gi"), '<span class="smallcaps">$&</span>')
});

span { color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>We have cows on our farm</h2>
<h2>C++ Apps $var$</h2>

请注意，这里的正则表达式看起来像/cows|c\+\+|\$var\$/gi，其中+和$，特殊的正则表达式元字符，被转义，替代项与| 交替运算符。

另外，请注意，不需要任何外括号，因为默认组是包含整个匹配项的组 0，并且 JavaScript 正则表达式中对组 0 的反向引用是$&. 因此，替换总是使用与在文本中找到的完全相同的搜索词来完成。

请注意，如果您只需要匹配整个单词，则需要特殊\b的边界，或者（如果搜索词总是由字母、数字或_）或(\W|^)/ (?!\w)（如果可以有特殊字符）：

var words = ["cows", "c++", "$var$"];
$("h2").html(function(_, html) {
   return html.replace(new RegExp("(\\W|^)(" + words.map(function(x) { 
       return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
     }).join('|') + ")(?!\\w)", "gi"), '$1<span class="smallcaps">$2</span>')
});

span { color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>We have cows in our farm cowshed</h2>
<h2>C++ Apps $var$ in $var$moretext</h2>

Answer 5

在我的情况下，我在目标 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 6

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