脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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;
    } 
});

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery实现页面关键词高亮显示的方法教程全部内容，希望文章能够帮你解决javascript代码实例教程-jquery实现页面关键词高亮显示的方法教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。