Question

我正在尝试使用<span></span>在文本匹配项周围添加类似:contains()的html标记。此代码中的<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;
    }
});

如何运作：

我们找到所有相关段落。
我们使用each循环播放它们。
我们得到了内容的标记。
我们做替换。正则表达式中的\b代表“单词边界”，所以我们没有像“站立”这样的东西，这样就搞砸了。替换字符串中的$&是我们匹配的内容，因此“AND”替换为“AND”，“and”替换为“and”。
如果有任何更改，我们会将它们写回元素。如果不是，我们不这样做，因为这是不必要的开销。

注意事项：

如果你有这些段落的嵌套实例，你将会多次出现跨度（因为我们将处理文本两次，一次处理外部，一次处理内部段落）。不过，你不应该嵌套段落，所以......
此消除并重新创建相关段落的内容。如果你有任何元素的事件处理程序，那些将被分离。（你在对这个问题的评论中说，我只是强调它。）

Answer 2

您可以使用.replace()功能：

$('div p').html($('div p').html().replace(/AND/gi, '<span class="bold">AND</span>'));

但当然你必须解决这个问题，比如这个字符串：

<div class="bg-text"> <p> JIMMY AND LILY'S BAND ARE WAITING UP AGAINST THE GRAND STAND LOOKING FOR A HAND WITH THEIR INSTRUMENTS </p> </div>

JSFIDDLE

如果：contains（）使用jQuery匹配文本</span>，则在段落中间添加<span>标记

2 个答案: