1

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

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

这显然不是我想要的。

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

谢谢！

4

1 回答 1

2

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

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);
}
于 2012-06-14T21:16:43.330 回答