Javascript:replace(） 所有，但只在 html 标记之外

Javascript: replace() all but only outside html tags

本文关键字：html replace 所有 Javascript      更新时间：2023-09-26

我有一个自动完成表单，当显示与用户搜索字符串匹配的结果时，我想突出显示搜索字符串本身。我计划通过将搜索字符串的任何出现包装在标签（例如 ）或给定类中来做到这一点。现在，问题是在使用正则表达式时，如果模式发生在 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 字符串中的文本部分的想法吗？

您的代码应如下所示：

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/

解析 HTML 并找到其中的所有文本节点，并在所有文本节点中执行替换。如果您使用的是jQuery，则只需将代码片段传递给$()即可，在文档片段中解析它，然后您可以查询或单步执行所有元素并找到要替换的所有.text()。

相关文章：