项目开发中多次遇到，前端搜索功能文本高亮问题。每次遇到关键词跨元素，因前端知识有限，用正则凑合使用，体验差，开发难度较高。
——今天发现这款插件完美解决了
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/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。