使用JQuery搜索和突出显示
我需要在加载页面时突出显示搜索到的文本，与要突出显示的特定单词匹配的整个单词。
我知道我可以使用div的id并相应地突出显示该字段。
这里的问题是我有一个复杂的div结构
我在谷歌上发现了这个，但这可以解决“p：”
var str = "test"; $(function(){ $('p:contains('+str+')'). each(function(){ var regex = new RegExp(str, "g"); $(this).html( $(this).html(). replace( regex , ""+str+"" ) ); }); }); 我试图弄乱这个代码来代替循环div，但我无法达成解决方案
为什么使用自制高亮function是一个坏主意
从头开始构建自己的突出显示function可能是一个坏主意的原因是因为你肯定会遇到其他人已经解决的问题。 挑战：
- 您需要删除带有HTML元素的文本节点以突出显示您的匹配而不会破坏DOM事件并反复触发DOM重新生成（例如
innerHTML就是这种情况） - 如果要删除突出显示的元素，则必须使用其内容删除HTML元素，并且还必须组合拆分的文本节点以进行进一步搜索。 这是必要的，因为每个荧光笔插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则无法找到它们。
- 您还需要构建测试以确保您的插件在您没有考虑过的情况下工作。 而我正在谈论跨浏览器测试！
听起来很复杂？ 如果你想要一些function，比如忽略突出显示，变音符号映射，同义词映射，iframe内搜索，分离词搜索等一些元素，这就变得越来越复杂。
使用现有插件
使用现有的，实现良好的插件时，您不必担心上面提到的东西。 Sitepoint上的第10条jQuery文本荧光笔插件比较了流行的荧光笔插件。 这包括来自这个问题的答案插件。
看看mark.js
mark.js是一个用纯JavaScript编写的插件，但也可以作为jQuery插件使用。 它的开发目的是提供比其他插件更多的机会，可以选择：
- 单独搜索关键字而不是完整的术语
- map diacritics（例如，如果“justo”也应匹配“justò”）
- 忽略自定义元素内的匹配
- 使用自定义突出显示元素
- 使用自定义突出显示类
- 映射自定义同义词
- 在iframe内搜索
- 收到未找到的条款
DEMO
或者你可以看到这个小提琴 。
用法示例 ：
// Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi);
它是我在GitHub上开发的免费开源软件（ 项目参考 ）。
我在这里找到了解决方案的答案。
我根据@Echo提到的插件创建了一个插件。 这个版本的优点是它允许你“一次突出显示一堆单词”。
它的目的是像护目镜高亮一样，在其中传递一个搜索字符串，它会找到这些单词的出现并突出显示它们。
你可以在这里拿起它
这个JQuery Highlight插件提供了一些额外的选项（比如只根据OP的要求搜索整个单词），并且使用起来非常简单。
我正在使用它
$(".materia").highlight($('#tbxBusca').val());
突出显示键入文本框的文本。
要突出显示多个文本，请使用此修改后的highlight.js
https://github.com/tankchintan/highlight-js
用法：
Highlight Highlight Test Multiple Clear highlight