jquery - 针对正文中的特定单词并对其应用样式？

Question

目前我正在使用一个 Jquery 字符串来尝试在网站的整个正文中定位一个特定的单词并向它添加一个类。因此，例如每次出现“Nike”一词时，它都会使其变为红色并在其末尾附加一个 TM。

我一直在使用它，但它只替换了内容中第一次出现的 Nike 作品，我无法弄清楚为什么它没有替换所有这些。

有任何想法吗？

score 2 · Accepted Answer

试试这个/Nike/g

.replace只会在第一次出现时执行。要继续搜索，您需要进行全局搜索。

$('p:contains(Nike)').each(function(){
  $(this).html(
    $(this).html().replace(/Nike/g,'<span class="fancy">Nike</span>')
  );
});

</p>

score 1 · Accepted Answer

我建议以下内容：

$('body').html(
    function(i,h){
        return h.replace(/(Nike)/g,'<span class="nike tm">$1</span>');
    });

再加上以下CSS：

.tm::after {
    content: '™';
}

.nike {
    color: red;
}

选择器被修改为您希望在其中找到单词的任何元素。

鉴于您可能需要定位不实现::after伪元素/CSS 生成内容的浏览器，那么还有以下选项：

$('body').html(
    function(i,h){
        return h.replace(/(Nike)/g,'<span class="nike">$1™&lt;/span>');
    });

它省略了添加tm类并显式地将该字符添加到返回的 HTML 字符串中。

这些方法之所以有效，是因为正则表达式允许使用g（我认为是“全局”？）标志，它替换了每次出现的匹配项（括号内的字符串）。但是，因为您正在查看html内容，这会带来任何类名本身nike也会被替换的风险，因此请非常非常确定该字符串不会出现在意外的地方（替换会导致问题））。

2 回答 2