我需要在页面加载时突出显示搜索到的文本，与要突出显示的特定单词匹配的整个单词。

我知道我可以使用 div 的 id 并相应地突出显示该字段。

这里的问题是我有一个复杂的 div 结构
我通过 Google 找到了这个，但这适用于“p:”

 var str = "test";
      $(function(){
           $('p:contains('+str+')').
               each(function(){
                 var regex = new RegExp(str, "g");
                 $(this).html(
                     $(this).html().
                         replace( regex ,
                                 "<span class='highlight'>"+str+"</span>"
                                )
               );
           });
     });

我试图修改这段代码来循环 div ，但我无法找到解决方案

为什么使用自制的突出显示功能是一个坏主意

从头开始构建自己的突出显示功能可能不是一个好主意，因为您肯定会遇到其他人已经解决的问题。挑战：

• 您需要删除带有 HTML 元素的文本节点来突出显示您的匹配项，而不会破坏 DOM 事件并一遍又一遍地触发 DOM 重新生成（例如，innerHTML)
• 如果要删除突出显示的元素，则必须删除 HTML 元素及其内容，并且还必须组合拆分的文本节点以进行进一步搜索。这是必要的，因为每个荧光笔插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则它们将不会被发现。
• 您还需要构建测试以确保您的插件在您没有考虑过的情况下工作。我说的是跨浏览器测试！

听起来很复杂？如果您想要一些功能，例如忽略突出显示的某些元素、变音符号映射、同义词映射、iframe 内搜索、分隔词搜索等，这会变得越来越复杂。

使用现有插件

当使用现有的、实现良好的插件时，您不必担心上述事情。文章10 个 jQuery 文本荧光笔插件 https://www.sitepoint.com/10-jquery-text-highlighter-plugins/Sitepoint 上比较了流行的荧光笔插件。这包括这个问题的答案的插件。

看一下mark.js https://markjs.io/

mark.js https://markjs.io/就是这样一个用纯 JavaScript 编写的插件，但也可以作为 jQuery 插件使用。它的开发是为了提供比其他插件更多的机会，并具有以下选项：

• 单独搜索关键字而不是完整术语
• 地图变音符号（例如，如果“justo”也应该匹配“justò”）
• 忽略自定义元素内的匹配
• 使用自定义突出显示元素
• 使用自定义突出显示类
• 映射自定义同义词
• 还在 iframe 内搜索
• 收到未找到的条款

DEMO https://markjs.io/configurator.html

或者你可以看到这把小提琴 https://jsfiddle.net/julmot/vpav6tL1/.

使用示例:

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

它是我在 GitHub 上开发的免费、开源的（项目参考 https://github.com/julmot/mark.js).