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

本文实例讲述了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程序设计有所帮助。