如何使用jQuery在页面中搜索并高亮指定词语？

你的全页搜索高亮功能无法正常运行，主要是几个核心逻辑和DOM操作的问题，我会逐一拆解并给出可直接运行的修复代码：

核心问题点 #

• 无效节点遍历：$("*").contents()会遍历页面所有元素（包括插件自身的弹窗DOM、<script>、<style>这类不需要处理的节点），不仅浪费性能还会干扰功能。
• 文本节点操作错误：文本节点（nodeType == 3）没有.html()方法，你试图用它插入HTML标签完全行不通，必须通过拆分文本节点并替换为带高亮标签的DOM结构来实现。
• 无重复高亮防护：多次点击搜索按钮会重复给同一单词包裹高亮span，导致DOM冗余混乱。

修复后的完整代码 #

首先添加一个清除已有高亮的辅助函数，避免重复包裹：

function clearHighlights() {
  // 找到所有我们添加的高亮span，替换为原始文本
  $('span[style*="background-color"]').each(function() {
    $(this).replaceWith($(this).text());
  });
}

然后修改你的搜索高亮函数：

$('.search').click(function(){
  // 先清除之前的高亮，避免重复包裹
  clearHighlights();

  // 遍历每个需要高亮的词-颜色对
  searchList.forEach(function(item) {
    var targetWord = item.word;
    var highlightColor = item.color;
    // 构建正则，若需要支持特殊字符可添加转义逻辑（见下方优化点）
    var matchRegex = new RegExp('\\b' + targetWord + '\\b', 'gi');

    // 只遍历页面正文元素，排除插件自身的DOM和无效节点
    $('body *:not(script, style, .input, .display, .search)').contents().each(function() {
      // 仅处理包含目标词的文本节点
      if (this.nodeType === 3 && matchRegex.test(this.nodeValue)) {
        var originalText = this.nodeValue;
        var textParts = originalText.split(matchRegex);
        var parentNode = this.parentNode;

        // 移除原文本节点
        $(this).remove();

        // 重新构建DOM：拆分后的文本片段，匹配到的词用高亮span包裹
        textParts.forEach(function(part) {
          if (matchRegex.test(part)) {
            var highlightSpan = $('<span>').css('background-color', highlightColor).text(part);
            parentNode.appendChild(highlightSpan[0]);
          } else {
            parentNode.appendChild(document.createTextNode(part));
          }
        });
      }
    });
  });
});

额外优化建议 #

1. 正则特殊字符转义：如果用户输入的单词包含.、*这类正则特殊字符，需要先转义避免匹配异常，可添加这个辅助函数：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 使用时替换正则构建行：
var matchRegex = new RegExp('\\b' + escapeRegExp(targetWord) + '\\b', 'gi');

2. 性能优化：如果页面内容极多，可以进一步缩小目标元素范围（比如只遍历p, div, h1-h6这类正文容器），提升遍历速度。

测试验证 #

现在你可以：

• 输入单词、选择颜色添加到列表
• 点击搜索按钮，页面中的目标单词会被正确高亮
• 再次点击搜索会先清除旧高亮，再重新渲染
• 插件自身的输入框、颜色按钮等不会被误处理

内容的提问来源于stack exchange，提问作者Aalok Borkar