jquery - if :contains() match the text using jQuery 在段落中间添加标签

Question

我正在尝试添加一个 html 标签，例如 <span></span>使用 :contains() 围绕文本匹配.<p>这段代码里面是动态的，不是静态的。所以我想要一个可以使用 :contains() 检测单词的动态 jQuery , 如果匹配，将添加 html 标签 <span>周围。这是我的代码，我正在尝试检测单词“AND”并包装 <span>围绕它，这样我就可以将 css/class 添加到那个“AND”字。

<div class="bg-text">
<p>
JIMMY AND LILY
</p>
</div>

我希望它是这样的

<div class="bg-text">'
<p>
JIMMY <span class="bold">AND</span> LILY
</p>
</div>

Answer 1

如果您不介意删除相关段落的内容并重新创建它，那么:

$('div p').each(function() {
    var originalText = this.innerHTML;
    var newText = originalText.replace(
                         /\band\b/gi,
                         '<span class="bold">$&</span>'
                     );
    if (originalText !== newText) {
        this.innerHTML = newText;
    }
});

工作原理:

1. 我们找到所有相关段落。

2. 我们用each 遍历它们。

3. 我们得到他们内容的标记。

4. 我们进行更换。正则表达式中的 \b 代表“单词边界”，因此我们没有诸如“stand”之类的东西，这样就搞砸了。替换字符串中的$&就是我们匹配的任何内容，所以“AND”被替换为“AND”，“and”被替换为“and”。

5. 如果有任何变化，我们将它们写回元素。如果没有，我们不会这样做，因为这是不必要的开销。

注意事项:

• 如果您有这些段落的嵌套实例，您将多次出现跨度(因为我们将处理文本两次，一次用于外部段落，一次用于内部段落)。不过，您不应该嵌套段落，所以...

• 这删除并重新创建相关段落的内容。如果您在其中的任何元素上有事件处理程序，这些将被分离。 (你在对问题的评论中说没问题，我只是强调它。)