查找包含字符串匹配正则表达式的 DOM 元素 [关闭]答案

【问题标题】：Find DOM element containing string matching regular expression [closed]查找包含字符串匹配正则表达式的 DOM 元素 [关闭]
【发布时间】：2011-12-06 12:20:21
【问题描述】：

我需要在 HTML 页面上找到与特定正则表达式匹配的所有文本片段（也就是说，我需要忽略标签，以便 'First name: John' 将匹配 'First name: John'），然后突出显示这些找到的片段（通过用新元素装饰并应用自定义 css 样式）并能够定位这些片段，例如能够将这些滚动到视图中。功能类似于 Skype 浏览器插件对页面上找到的电话号码所做的事情。

【问题讨论】：

您是否有无法运行的代码，或者这是一个“给我代码”的问题？你试过什么？
我需要找到方法，我可以做编码。如果它已经解决并且代码可用 - 更好。
似乎 jQuery 可以使用 :contains() 选择器来做到这一点。也许可以重新定义其逻辑以使用正则表达式搜索而不是子字符串搜索。
递归遍历 DOM，检查文本节点的 data（nodeType 为 3）。
Jake Archibald 使用生成器向此发布了 solution。

标签： javascript regex search dom

【解决方案1】：

您可以使用jQuery selectors 获取包含John 的 标记，这些标记位于包含First name: 的 标记之后，然后例如应用一种样式：

$("span:contains('First name:') ~ b:contains('John')").css('color','red');

这是一个运行示例：http://jsfiddle.net/XzwNj/

【讨论】：

这只是一个例子，不是具体案例

【解决方案2】：

您可以递归地遍历 DOM，查看元素的 textContent 或 innerText 属性（视情况而定），或者您可以对 返回的集合使用循环em>getElementsByTagName。无论哪种方式，一旦您确定了文本和父元素，您就需要弄清楚如何替换它。

如果字符串被拆分为一个或多个其他元素，您对替换中的文档结构有什么要求？

【讨论】：

我认为使用以节点为中心的方法与以字符串为中心的方法相比，会产生更多的可移植性。此外，这是 DOM 的大部分人都遇到问题的方面 :)。
是的，但是 OP 想要字符串，即使它被拆分为多个元素，因此仅查看文本节点将无法完成这项工作。我不知道他打算如何处理拆分字符串，但至少上面的方法会找到最近的拥有整个字符串的祖先。

【解决方案3】：

你尝试过这样的事情吗？

document.body.innerHTML.replace(/<\/?[^>]+>/g, '')

【讨论】：

这不仅会破坏每个动态添加的侦听器，而且可能会在不同浏览器中以不同方式破坏任何具有非平凡内容的页面的元素、属性和属性。
我需要保留我的搜索结果在 DOM 中的位置信息，或者我可以执行 document.body.innerText.match() - 这不是我需要的。