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去除字符串左右两端的空格
Feb 05 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
原生JavaScript实现购物车
Jan 10 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php生成zip文件类实例
2015/04/07 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python的re正则表达式实例代码
2018/01/24 Python
python查询mysql,返回json的实例
2018/03/26 Python
django 环境变量配置过程详解
2019/08/06 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
家长学校培训材料
2014/08/20 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
详解Nginx 工作原理
2021/03/31 Servers
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python