Javascript：replace() 仅在 html 标签之外答案

【问题标题】：Javascript: replace() all but only outside html tagsJavascript：replace() 仅在 html 标签之外
【发布时间】：2014-11-15 21:37:10
【问题描述】：

我有一个自动完成表单，当显示与用户搜索字符串匹配的结果时，我想突出显示搜索字符串本身。我计划通过将任何出现的搜索字符串包装在标签中来做到这一点，例如 , 或带有给定类的 a 。现在，问题是在使用 regEx 时，如果模式出现在 html 标记中，我会遇到问题。比如

var searchPattern = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp(searchPattern, "gi")

var output = originalString.replace(regEx, "<strong>" + searchPattern + "</strong>");

alert(output);

（演示：http://jsfiddle.net/cumufLm3/7/）

这也将替换标签中出现的“pa”

 <span class="something">

破解密码。我不确定如何处理这个问题。我一直在检查各种类似的问题，并且我了解到通常我不应该使用正则表达式来解析 html。但是我不确定是否有任何快速的方法可以平滑地解析 html 字符串，更改每个节点的文本，并使用更改的文本“重建”字符串？

当然，我想我可以使用 $.parseHTML()，遍历每个节点，并以某种方式重写字符串，但在我看来这太复杂且容易出错。有没有一种聪明的方法来解析 html 字符串以告诉“只在 html 标签之外执行此操作”？

请注意，必须处理标签本身的内容。因此，在我上面的示例中，replace() 也应该作用于“被替换的是 pa 但仅在 html 标记之外”的部分。

是否有足够可靠的正则表达式来处理这个问题，或者（我想更好）优雅地处理 html 字符串中的文本部分？

【问题讨论】：

标签： javascript jquery html regex string

【解决方案1】：

您的代码应如下所示：

var searchWord = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp("(" + searchWord + ")(?!([^<]+)?>)", "gi");

var output = originalString.replace(regEx, "<strong>$1</strong>");

alert(output);

来源：http://pureform.wordpress.com/2008/01/04/matching-a-word-characters-outside-of-html-tags/

【讨论】：

【解决方案2】：

解析 HTML 并找到其中的所有文本节点，对所有文本节点进行替换。如果您使用的是 jQuery，您只需将 sn-p 传递给 $()，后者将其解析为文档片段，然后您可以查询或遍历所有元素并找到所有要替换的 .text()。

【讨论】：