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()。

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

2 个答案: