针对body中的特定单词并将样式应用于它

Question

当前，我正在使用jQuery字符串来试图定位网站整个主体中的特定单词并在其中添加类。因此，每当出现"耐克"一词时，例如，它会变成红色并将TM附加到其末端。

我一直在使用它，但它仅取代了内容中的作品的第一次出现，我无法弄清楚为什么它不替换所有内容。

这是示例：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小提琴演示。

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

鉴于您可能需要定位不实施::after伪元素/CSS生成的内容的浏览器，则还有：

的选项

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

Js小提琴演示。

省略添加tm类并明确添加该字符的HTML字符串。

这些方法之所以起作用，是因为正则表达式允许使用 g（我认为'global'？）标志，它替换了遇到的匹配的每个每个事件（括号中的字符串）。但是，因为您正在查看html内容，所以这具有nike的任何类名称本身的风险，因此请非常确保该字符串将不会在意外的地方出现（替换会导致问题）。