Javascript：replace（）除了html标签之外的所有内容

Question

我有一个自动完成表单，当显示与用户的搜索字符串匹配的结果时，我想突出显示搜索字符串本身。 我计划通过将任何匹配的搜索字符串包含在标记中来实现，或者使用给定的类。 现在，问题是当使用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/

Answer 2

解析HTML并查找其中的所有文本节点，在所有节点中进行替换。 如果您正在使用jQuery，您可以通过将代码段传递给$()来完成此操作， $()在文档片段中解析它，然后您可以查询或跳过所有元素并找到要替换的所有.text() 。