javascript - 在复杂的 HTML 标记中包装字符串列表

Question

我有一个字符串列表，应该在附加到 DOM 之前或之后用 HTML 标记中的某个类包装(这两个选项都是可接受的)。问题是标记内部有很多“垃圾”——格式化标签、样式、包装到另一个 DOM 元素，这些应该在替换后保留。请参见下面的示例:

<custom-tag>Word4<span style='font-family:"Candara","sans-serif"'>Word1 Word2</span>Word3</custom-tag>
<custom-tag>Word1<span style='font-family:"Candara","sans-serif"'>Word2<br>Word1<b>Word6</b></span></custom-tag>

鉴于 ['Word1', 'Word4', 'd6'] 的列表，我应该收到结果:

<custom-tag><span class="replaced">Word4</span><span style='font-family:"Candara","sans-serif"'><span class="replaced">Word1</span> Word2</span>Word3</custom-tag>
<custom-tag><span class="replaced">Word1</span><span style='font-family:"Candara","sans-serif"'>Word2<br><span class="replaced">Word1</span><b>Wor<span class="replaced">d6</span></b></span></custom-tag>

所以:

1. 只替换纯字符串，不要修改标签和样式
2. 替换每个内容中列表中的所有字符串(不仅是第一个)

我从正则表达式开始，写了一个匹配列表中的一个词的内容。

<custom-tag>.*?|(Word1).*?<\/custom-tag>

不幸的是，我不是正则表达式方面的专家，所以我需要帮助。理想情况下，它应该是 1 个正则表达式，它匹配列表中的所有字符串并排除标签和样式。另一种选择 - 编写一个使用 DOM API 的脚本，并按照上述方式制作。感谢您的任何想法。

Answer 1

var list = ['Word1', 'Word4', 'd6', 'red'];

var query = list.join("|");
// Uncomment if you cannot trust your `list` Array values
// query = query.replace(/[<>)(.]?/g, "");

var reg = new RegExp("(?![^<]+>)("+ query +")", "ig");

$("#source").html(function(i, html){
  return html.replace(reg, "<div class='replaced'>$1</div>");
});

.replaced{display:inline; background:gold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
  <custom-tag>Word4<span style='font-family:"Candara","sans-serif"; color:red;'>Word1 Word2</span>Word3</custom-tag>
  <custom-tag>Word1<span style='font-family:"Candara","sans-serif"'>Word2<br>Word1<b>Word6</b></span></custom-tag>
</div>

上面所做的基本上是这样的: Regex101.com Explained

以上阻止了 < tags > 之间的正匹配因此也会跳过 attributes 中的匹配项；即:你可以看到我使用了 "red"字符串查询，但即使在源 color:red; 中也没有正匹配 - 否则(逻辑上)会导致一团糟:属性文本被包裹进入一个 DIV :)

^{免责声明:必读:RegEx match open tags except XHTML self-contained tags
如果你在阅读上面的链接后感觉很酷，并且你不必对那里提到的“几个”问题那么挑剔......你很高兴}