欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-01-29 09:34:30|栏目: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程序设计有所帮助。

上一篇:jQuery验证插件validate使用详解

栏    目:jquery

下一篇:jQuery实现鼠标滚动图片延迟加载效果附源码下载

本文标题:jquery实现页面关键词高亮显示的方法

本文地址:http://www.codeinn.net/misctech/53556.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有