定位正文中的特定单词并对其应用样式？答案

【问题标题】：Target a specific word in body and apply a style to it?定位正文中的特定单词并对其应用样式？
【发布时间】：2012-10-29 18:53:10
【问题描述】：

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

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

这里是示例：http://jsbin.com/ijufu3/21/

有什么想法吗？

【问题讨论】：

标签： jquery word target

【解决方案1】：

试试这个/Nike/g

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

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

【讨论】：

工作得很好。你们是天才。非常感谢:)
似乎是什么问题..??

【解决方案2】：

我的建议是：

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

加上以下 CSS：

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

.nike {
    color: red;
}

JS Fiddle demo.

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

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

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

JS Fiddle demo.

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

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

【讨论】：

工作得很好。你们是天才。非常感谢:)
这个运行良好的脚本遇到了障碍。因此，对于上面的示例，它会查找“Nike”并将 TM 应用到它的末尾。当我在我的内容中创建一个链接时，这成了一个问题，它破坏了链接并在 Nike 的末尾添加了一个 TM。有没有办法可以专门消除此链接上发生的该功能？也许在 Nike 的一个字母之间添加某种不可见的字符，使其与功能失效？
@crobley：我想是的。您能否将我链接到显示您当前正在使用的代表性 HTML 的 JS Fiddle？