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


Posted in Javascript onMarch 12, 2015

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

Javascript 相关文章推荐
JavaScript 常用函数
Dec 30 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 #Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 #Javascript
JavaScript中return false的用法
Mar 12 #Javascript
JavaScript中神奇的call()方法
Mar 12 #Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 #Javascript
JavaScript中定义函数的三种方法
Mar 12 #Javascript
javascript实时显示北京时间的方法
Mar 12 #Javascript
You might like
php 信息采集程序代码
2009/03/17 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python实现修改文件内容的方法分析
2018/03/25 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python实现顺时针打印矩阵
2019/03/02 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
大专自我鉴定范文
2013/10/23 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
党员志愿者活动方案
2014/08/28 职场文书
公证委托书格式
2014/09/13 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL