我想在一个元素中找到一串文本，并在它周围加上一些 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标签。
【问题讨论】：
$("h2:contains('cow')").html(function(_, html) {
return html.replace(/(cow)/g, '<span class="smallcaps">$1</span>');
});
【讨论】：
function(_ , html)。
html 方法接受一个函数，第一个参数是索引，第二个是 html 内容。
_ 作为索引吗？它基本上只是发送一个空索引吗？
_ like $ 是用于在 JavaScript 中定义标识符的有效字符。不是null。还有一个名为 underscore underscorejs.org 的 JavaScript 库
<div><a href="cows">Click here</a></div>。这会破坏属性。
另一种方法，按关键字拆分并加入更新的 html。
$("h2:contains('cow')").html(function(_, html) {
return html.split('cow').join("<span class='smallcaps'>cow</span>");
});
注意：我没有对此进行测试，但我假设这会比替换的性能更差，但为了提供信息，我还是会包括在内
【讨论】：
这是@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>');
});
});
【讨论】：
您通常希望以不区分大小写的方式匹配一些任意文本。有时，搜索查询包含特殊的正则表达式元字符，必须在编译模式之前进行转义。
使用类似的解决方案
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，其中+ 和$、special regex metacharacters 被转义，替代项与| alternation operator 进行或运算。
另外，请注意，不需要任何外括号，因为默认组是包含整个匹配项的组 0，并且在 JavaScript 正则表达式中对组 0 的反向引用是 $&。因此，替换总是使用与在文本中找到的完全相同的搜索词。
请注意，如果您需要仅匹配整个单词，则需要特殊边界，\b（如果搜索词始终由字母、数字或_ 组成）或@ 987654333@/(?!\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>【讨论】：
在我的情况下，我在目标 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);
【讨论】：
$("h2:contains('cow')").each(function() {
var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
$(this).html(newText);
});
【讨论】：