如何在jQuery中只选择标签之外的文本答案

【问题标题】：How to only select text outside of a tag in jQuery如何在jQuery中只选择标签之外的文本
【发布时间】：2012-06-14 20:19:45
【问题描述】：

我正在尝试在 Wordpress 网站上为客户实施 a text-highlighting search script。该脚本对来自网页的原始 HTML 数据执行正则表达式搜索，将 span 标签/css 元素添加到与查询匹配的文档的任何部分。

但是，我正在尝试搜索一些多级 HTML（标题等），并且一些标签具有描述性 id 和类名，实际上最终会被脚本找到并突出显示。当脚本在 id 名称之一中找到匹配项时，这会导致一些奇怪的行为（例如：搜索“Cont”会将 <div id="Container"> 换成 <div id="<span class="highlight">Cont</span>ainer">。

这显然不是我想要的。

所以，我想知道是否有办法区分将显示在页面上的“真实文本”和原始 HTML，以便我可以仅突出显示 HTML 的元素实际会显示出来。

谢谢！

【问题讨论】：

这样可以解决问题吗：stackoverflow.com/questions/2742223/…
@Cyric297 我不确定...如果我直接访问标签内的文本，这似乎可行，但我试图在一块 HTML 上运行脚本包含嵌套元素等。我尝试了这种方法（也许我做错了一点），但它似乎没有做我想要的。不过谢谢！
您只需要让您的正则表达式排除标签内的内容。这个问题在这里得到了回答：stackoverflow.com/questions/179779/…

标签： jquery html search selector

【解决方案1】：

我删除了我的第一篇文章以避免混淆，尽管它回答了主题问题。 ) 但在你的情况下，我想应该使用不同的方法：

1) 通过...获取所有文本节点

var textNodes = $('body').find('*').contents().filter(function() { 
  return this.nodeType === 3 });

2) 用一些替换操作突出显示搜索词：

var term = 'xxx';
textNodes.each(function() {
  var $this = $(this);
  var content = $this.text();
  content = content.replace(term, '<span class="highlight">' + term + '</span>');
  $this.replaceWith(content);
}

【讨论】：

完美解决。谢谢！
我经历了很多解决方案，包括正则表达式和纯 JavaScript DOM 遍历器，但这是迄今为止最好的解决方案。