mark.js 是一个用纯JavaScript编写的插件,但也可以作为jQuery插件使用。开发它是为了提供比其他插件更多的机会,可以选择:
单独搜索关键字,而不是完整的术语映射变音符号(例如,如果“justo”也应该匹配“justò”)
忽略自定义元素内部的匹配DEMO
或者,您可以看到this fiddle.Usage example:
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);
它是免费的,在GitHub上开发的开源软件(project reference).标记示例。用代码突出显示js关键字
$(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);
}).trigger("input.highlight").focus();
});
mark {
background: orange;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
Lorem ipsum dolor test sit amet
</div>
我找到了答案here. 你也可以在那里找到很多其他答案。但我更喜欢使用jQuery
插件。原因如下-为什么使用自制的突出显示功能是个坏主意?为什么从头开始构建自己的突出显示功能可能是个坏主意,因为你肯定会遇到其他人已经解决的问题。挑战:
您需要删除带有HTML元素的文本节点,以突出显示匹配项,而不会破坏DOM事件,也不会一次又一次地触发DOM重新生成(例如。innerHTML
)如果要删除突出显示的元素,必须删除HTML元素及其内容,还必须合并拆分的文本节点以进行进一步搜索。这是必要的,因为每个highlighter插件都会在文本节点内搜索匹配项,如果您的关键字将被拆分为多个文本节点,则不会找到它们您还需要构建测试,以确保插件在您没有想到的情况下工作。我说的是跨浏览器测试听起来很复杂?如果您想要一些功能,如忽略高亮显示中的某些元素、变音符号映射、同义词映射、iframe内搜索、分词搜索等,这将变得越来越复杂。
当使用现有的、实现良好的插件时,您不必担心上述问题。
希望这件事对你有帮助。