项目开发中多次遇到，前端搜索功能文本高亮问题。每次遇到关键词跨元素，因前端知识有限，用正则凑合使用，体验差，开发难度较高。
——今天发现这款插件完美解决了
JavaScript关键高亮，完美解决方案：
针对每个用例的搜索词突出显示。可以与纯JavaScript或jQuery插件一起使用。
在某些情况下，即使匹配出现在多个元素中，也需要突出显示匹配项。假设下面是要突出显示搜索词“突出显示文本”的上下文：
小样DEMO:
<!DOCTYPE><html><head> <title>mark.js</title> <meta name="generator" content="editplus"/> <style type="text/css"> mark { background: orange; color: black; } </style></head><body><input type="text" value="test"><div id="context"> <p>明确任务：全面建成小康社会 一个都不能少</p> <p data-spm-anchor-id="0.0.0.i1">从黄土高坡到茫茫林海，从雪域高原到草原牧区，从西北边陲到云贵高原，习近平多次到我国最贫困、最落后的地区，察真情、看真贫。他曾说<strong><span>“他们的生活存在困难，我感到揪心。他们生活每好一点，我都感到高兴”</span></strong>。 </p> <span>中华</span><b>人民</b><i>共和国</i></div><script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.es6.js"></script><script type="text/javascript"> $(function () { $("input").on("input.highlight", function () { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm, { "acrossElements": true, "separateWordSearch": false, } ); }).trigger("input.highlight").focus(); });</script></body></html>原始效果：
搜索 “他曾说“他们” 效果:
搜索 “中华人民” 效果：
具体使用可参考插件官网：
https://markjs.io/