jquery 用 html 替换匹配的文本

Question

我想使用 jQuery 动态地将所有与给定正则表达式匹配的文本包含在特定标记中。例如:

<div class="content">
<div class="spamcontainer">
Eggs and spam is better than ham and spam.
<img src="spam-and-eggs.jpg">
I do not like green eggs and spam, though.
</div>
</div>

如果我的正则表达式是 ham|spam我想附上 <span class='meat-product'>那么我想转换为

<div class="content">
<div class="spamcontainer">
Eggs and <span class='meat-product'>spam</span> is better than <span class='meat-product'>ham</span> and <span class='meat-product'>spam</span>.
<img src="spam-and-eggs.jpg">
I do not like green eggs and <span class='meat-product'>spam</span>, though.
</div>
</div>

这是我的问题。我知道如何只用文本和 html 来做到这一点:

$("div.content").text(function() {
    return $(this).text().replace(/ham|spam/, function(match) {
        return '<span class="meat-product">' + match + '</span>';
        });
});

和

$("div.content").html(function(_, html) {
    return html.replace(/ham|spam/, function(match) {
        return '<span class="meat-product">' + match + '</span>';
        });
});

但前者用文本替换文本(所以我得到文本 <span ... 而不是 <span> 元素)，后者匹配 ham和 spam在任何 HTML 中，而不仅仅是在文本中。

我怎样才能只匹配文本，而且还能够用 HTML 元素替换该文本？

Answer 1

How can I match only text, but also be able to replace that text with HTML elements?

您可以选择所有后代元素和文本节点并过滤该集合以仅包含文本节点。然后您可以简单地用修改后的字符串替换每个文本节点:

$(".content *").contents().filter(function() {
  return this.nodeType === 3;
}).replaceWith(function () {
  return this.textContent.replace(/(ham|spam)/g, '<span class="meat-product">$1</span>');
});

$(".content *").contents().filter(function() {
  return this.nodeType === 3;
}).replaceWith(function() {
  return this.textContent.replace(/(ham|spam)/g, '<span class="meat-product">$1</span>');
});

.meat-product {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="spamcontainer">
    Eggs and spam is better than ham and spam.
    <img src="spam-and-eggs.jpg">I do not like green eggs and spam, though.
  </div>
</div>

• 使用通用选择器*来选择所有后代元素(当然你也可以使用$('.content').children()，但是只会深入一层...您可能会遇到嵌套元素，这意味着您将需要检索所有 文本节点，因此我使用* 来选择内容所有后代元素)。
• .contents() method获取所有文本节点和子元素。
• 然后过滤集合，以便仅包含文本节点，因为我们不想替换任何 HTML。文本节点的nodeType属性值为3。
• 最后，.replaceWith() method用于用替换的文本字符串更新每个文本节点。 .replaceWith() 方法的好处是您可以用 HTML 字符串替换文本。
• 您还可以像上面的示例一样使用捕获组来缩短您的.replace() 方法。然后，您可以简单地在 span 元素之间替换 $1。