定位身体中的特定单词并对其应用样式？

Question

目前我正在使用Jquery字符串来尝试在网站的整个主体中定位一个SPECIFIC字，并为其添加一个类。因此，每次出现“Nike”这个词时，它会使它变红并将TM附加到它的末尾。

我一直在使用它，但它只取代了内容中第一次出现的Nike工作，我无法弄清楚为什么它不会取代所有这些。

以下是示例：http://jsbin.com/ijufu3/21/

有什么想法吗？

Answer 1

试试这个/Nike/g

.replace 仅适用于第一次出现..要继续搜索，您需要进行全局搜索..

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

Answer 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的任何类名本身也会被替换，所以非常，非常确保此字符串不在意外的地方突然出现（替换会导致问题）。