jquery highlight 高亮显示，搜索关键字标红的方法

发布时间：2018-03-11作者：laosun阅读（5989）

Highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目，如果你想在页面做搜索关键字标红，那么这个插件绝对是不错的选择，本站在搜索界面也增加了这种高亮显示插件，有兴趣的朋友可以试一下！

闲话少说，直接看需求: 在一篇文章中查找关键字，找到后高亮显示.

这种需求可以用js实现，可以用jquery实现，殊不知jquery有现成的插件，亲，你不用自己实现了，只需要引入jquery-hightlight.js

增加高亮显示的颜色和 js代码片段

<script src="${ctx!}/assets/plugins/highlight/jquery.highlight.js">script>
<style>.highlight{color: #FF0000;} </style>
<script type="text/javascript">
var key = "mac";
$(document).ready(function(){
	$('.title').each(function(){
		$(this).highlight(key);
	});
	$('.w_list_overview').each(function(){
		$(this).highlight(key);
	});
})
</script>

完成，简单吧，而且忽略大小写。本博客再栏目页面增加了这种插件，可以搜索文章的标题和摘要，关键字进行标红