Javascript: replace() all 但仅在 html 标签之外

Question

我有一个自动完成表单，当显示与用户搜索字符串匹配的结果时，我想突出显示搜索字符串本身。我计划通过将任何出现的搜索字符串包装在一个标签中来实现这一点，例如 , 或带有给定类的 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 字符串中的文本部分？

Answer 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/