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 函数调用规则
Aug 26 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue实现在线翻译功能
Sep 27 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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为php增加openssl模块的方法
2011/06/14 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php广告加载类用法实例
2014/09/23 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python制作简单的网页爬虫
2015/11/22 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python绘制动态曲线教程
2020/02/24 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
2014年消防工作实施方案
2014/02/20 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
山楂树之恋观后感
2015/06/11 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python