搜索高亮【jquery.textSearch-1.0.js】用法
来源:互联网 发布:朋克字母 软件 编辑:程序博客网 时间:2024/06/10 03:22
// by zhangxixnu 2010-06-21 welcome to visit my personal website http://www.zhangxinxu.com/// textSearch.js v1.0 文字,关键字的页面纯客户端搜索// 2010-06-23 修复多字母检索标签破碎的问题// 2010-06-29 修复页面注释显示的问题// 2013-05-07 修复继续搜素关键字包含之前搜索关键字没有结果的问题// 不论何种情况,务必保留作者署名。 (function($){ $.fn.textSearch = function(str,options){ var defaults = { divFlag: true, divStr: " ", markClass: "", markColor: "red", nullReport: true, callback: function(){ return false; } }; var sets = $.extend({}, defaults, options || {}), clStr; if(sets.markClass){ clStr = "class='"+sets.markClass+"'"; }else{ clStr = "style='color:"+sets.markColor+";'"; } //对前一次高亮处理的文字还原 $("span[rel='mark']").each(function() { var text = document.createTextNode($(this).text()); $(this).replaceWith($(text)); }); //字符串正则表达式关键字转化 $.regTrim = function(s){ var imp = /[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g; var imp_c = {}; imp_c["^"] = "\\^"; imp_c["."] = "\\."; imp_c["\\"] = "\\\\"; imp_c["|"] = "\\|"; imp_c["("] = "\\("; imp_c[")"] = "\\)"; imp_c["*"] = "\\*"; imp_c["+"] = "\\+"; imp_c["-"] = "\\-"; imp_c["$"] = "\$"; imp_c["["] = "\\["; imp_c["]"] = "\\]"; imp_c["?"] = "\\?"; s = s.replace(imp,function(o){ return imp_c[o]; }); return s; }; $(this).each(function(){ var t = $(this); str = $.trim(str); if(str === ""){ return false; }else{ //将关键字push到数组之中 var arr = []; if(sets.divFlag){ arr = str.split(sets.divStr); }else{ arr.push(str); } } var v_html = t.html(); //删除注释 v_html = v_html.replace(/<!--(?:.*)\-->/g,""); //将HTML代码支离为HTML片段和文字片段,其中文字片段用于正则替换处理,而HTML片段置之不理 var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g; var a = v_html.match(tags), test = 0; $.each(a, function(i, c){ if(!/<(?:.|\s)*?>/.test(c)){//非标签 //开始执行替换 $.each(arr,function(index, con){ if(con === ""){return;} var reg = new RegExp($.regTrim(con), "g"); if(reg.test(c)){ //正则替换 c = c.replace(reg,"♂"+con+"♀"); test = 1; } }); c = c.replace(/♂/g,"<mark "+clStr+">").replace(/♀/g,"</mark>"); a[i] = c; } }); //将支离数组重新组成字符串 var new_html = a.join(""); $(this).html(new_html); if(test === 0 && sets.nullReport){ return false; } //执行回调函数 sets.callback(); }); };
})(jQuery);
阅读全文
0 0
- 搜索高亮【jquery.textSearch-1.0.js】用法
- mongoDB 全文搜索 TextSearch
- 高亮显示搜索到的关键字-jquery.highlight.js的用法!
- jquery highlight 搜索结果高亮显示
- jquery高亮显示搜索的关键字
- js+正文规则 高亮搜索关键字
- 简单高效的js搜索高亮
- js实现搜索结果关键词高亮
- js RegExp 搜索并高亮关键字
- jquery-highlight.js高亮显示
- JS高阶 jQuery
- 纯客户端页面关键字搜索高亮jQuery插件
- 纯客户端页面关键字搜索高亮jQuery插件
- 运用JS将搜索的关键字高亮显示
- js+正文规则 高亮搜索关键字(二)
- js+正文规则 高亮搜索关键字(三)
- 用js实现文本点击搜索,文本高亮显示
- 用js replace()函数实现搜索高亮
- Kafka学习整理七(producer和consumer编程实践)
- MFC Socket TCP
- 用java获取本机IP地址
- Python 字符串
- Spring 之注解事务 @Transactional
- 搜索高亮【jquery.textSearch-1.0.js】用法
- 面向对象-继承
- OSI七层模型与TCP/IP五层模型
- 设计模式-状态模式 C++实现
- easyUI 随记
- 《C++ Primer》读书笔记第十二章-2-动态数组 And 文本查询程序
- gradle 解决依赖冲突问题
- Vue项目目录说明
- Kafka学习整理八(topic管理)