jquery实现页面关键词高亮显示的方法

 更新时间:2015年03月12日 10:44:38   作者:pyawen  
这篇文章主要介绍了jquery实现页面关键词高亮显示的方法,实例分析了jQuery插件highlight实现高亮显示的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery实现页面关键词高亮显示的方法。分享给大家供大家参考。具体分析如下:

通过jquery对页面搜索关键词进行高亮显示
支持中文多词页面中高亮显示

1. JavaScript代码如下:

复制代码 代码如下:
jQuery.fn.extend({
    highlight: function(search, configs){
        if(typeof(search) == 'undefined') return;
        var configs =  jQuery.extend({
            insensitive: 1, //是否匹配大小写  0匹配 1不匹配
            hls_class: 'highlight', // 高亮后的class
            clear_last: true, // 清除原来高亮的结果
        },configs);  
        if(configs.clear_last) {
            $(this).find("strong."+configs.hls_class).each(function(){
                $(this).after($(this).text());
                $(this).remove();
            })
        }
        return this.each(function() {
            if(typeof(search) == "string") {
                $(this).highregx(search,configs);
            } else if (search.constructor === Array ) {
                for(var query in search){
                    var search_str = $.trim(search[query]);
                    if(search_str != "") $(this).highregx(search_str,configs);
                }
            }
        });              
    },             
    highregx: function(query,configs){
        query = this.unicode(query);
        var regex = new RegExp("(<[^>]*>)|("+ query +")", configs.insensitive ? "ig" : "g");      
        this.html(this.html().replace(regex, function(a, b, c){
            return (a.charAt(0) == "<") ? a : "<strong class=\""+ configs.hls_class +"\">" + c + "</strong>";
        }));
    },
    unicode: function(s){
         var len=s.length;
         var rs="";
         s = s.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");
         for(var i=0;i<len;i++){
            if(s.charCodeAt(i) > 255)
                rs+="\\u"+ s.charCodeAt(i).toString(16);
            else rs +=  s.charAt(i);
         }  
         return rs;
    } 
});

2.highlight插件点击此处下载

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章

  • jquery多级树形下拉菜单的实例代码

    jquery多级树形下拉菜单的实例代码

    这篇文章主要介绍了jquery多级树形下拉菜单的实例代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • jquery中使用ajax获取远程页面信息

    jquery中使用ajax获取远程页面信息

    当我们点击表格里面的标题显示相关的详细信息,比如点击新闻标题显示正文,而正文通常是在一个页面里面,通过获取传递的参数id查询数据库,然后显示出来
    2011-11-11
  • jQuery子元素过滤选择器用法示例

    jQuery子元素过滤选择器用法示例

    这篇文章主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery实现简洁的轮播图效果实例

    jQuery实现简洁的轮播图效果实例

    这篇文章主要介绍了jQuery实现简洁的轮播图效果,结合实例形式分析了jQuery的事件响应机制与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQueryUI中的datepicker使用方法详解

    jQueryUI中的datepicker使用方法详解

    JqueryUI作为一个优秀的前端库,在项目中经常会用到,下面小编抽点时间给大家介绍jQueryUI中的datepicker使用方法详解,一起看看吧
    2016-05-05
  • 基于jQuery的AJAX和JSON实现纯html数据模板

    基于jQuery的AJAX和JSON实现纯html数据模板

    jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,从而实现纯html数据模板,下面主要给大家介绍实现代码,感兴趣的朋友一起看下吧
    2016-08-08
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery中Dom的基本操作小结

    jQuery中Dom的基本操作小结

    本篇文章主要是对jQuery中Dom的基本操作进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jQuery 选择器项目实例分析及实现代码

    jQuery 选择器项目实例分析及实现代码

    首先废话一句,jQuery选择器真心很强大!接下来详细介绍jQuery 选择器项目实例实现方式
    2012-12-12
  • 基于jquery二维码生成插件qrcode

    基于jquery二维码生成插件qrcode

    这篇文章主要为大家详细介绍了基于jquery二维码生成插件qrcode的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论