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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
详解vue-router导航守卫
Jan 19 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
js用typeof方法判断undefined类型
2014/07/15 Javascript
Javascript函数的参数
2015/07/16 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python使用knn实现特征向量分类
2018/12/26 Python
python中partial()基础用法说明
2018/12/30 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python学习之os模块及用法
2020/06/03 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
关于逃课的检讨书
2014/01/23 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
财务简历的自我评价
2014/03/05 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
民政局个人整改措施
2014/09/24 职场文书
工作证明英文模板
2014/10/21 职场文书
高中教师个人总结
2015/02/10 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis