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>

所以：

仅替换普通字符串，不要触摸标签和样式
替换每个内容（不仅是第一个）中列表中的所有字符串

我是从正则表达式开始的，并编写了一个将匹配内容与列表中的一个术语匹配的内容。

<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 >之间的正匹配，因此也会跳过属性中的匹配项;即：你可以看到我使用"red"字符串查询，但即使在源颜色中：红色; 也没有正面匹配 - 否则（逻辑上）会导致完全混乱：包含在DIV中的属性文本：）

^{免责声明：必读：RegEx match open tags except XHTML self-contained tags

如果您在阅读上述链接后感觉很酷，并且您不必那么挑剔那里提到的“几个”问题...你很高兴}

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

1 个答案: