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

发布时间:2018-03-11作者:laosun阅读(5815)

jquery

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>


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



2 +1

版权声明

 jquery  前端

 请文明留言

0 条评论