Question

我正在尝试在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的元素这将实际显示。

谢谢！

Answer 1

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

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

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

2）用一些替换op：

突出显示搜索词

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);
}

如何只在jQuery中选择标记之外的文本

1 个答案: