共计 1213 个字符，预计需要花费 4 分钟才能阅读完成。
项目开发中多次遇到，前端搜索功能文本高亮问题。每次遇到关键词跨元素，因前端知识有限，用正则凑合使用，体验差，开发难度较高。
——今天发现这款插件完美解决了
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/
正文完