关键字搜索高亮jQuery插件
// 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 === ""){
alert("关键字为空");
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){
alert("没有搜索结果");
return false;
}
//执行回调函数
sets.callback();
});
};
})(jQuery);
//实例
/**
$("#searchTextTest") 为整个div区域
**/
<script> | |
$("form").submit(function(){ | |
var v = $("#txtSearchKeyword").val(); | |
$("#searchTextTest").textSearch(v); | |
return false; | |
}); | |
</script> |
关键字搜索高亮jQuery插件的更多相关文章
- 关键字搜索:jQuery过滤器插件fastLiveFilter||显示结果条数
引用js库 <script src="jquery-1.6.4.min.js"></script> <script src="jquery. ...
- jquery插件库
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- 转 常用JQuery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- jquery插件集合
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- (GoRails)在导航栏增加自动的搜索功能(jquery插件:easyautocomplete)(gem 'ransack' 搜索对象4000✨)
Global Autocomplete Search 需要用到一个JQuery插件和一个搜索对象的gem EasyAutocomplete jQuery插件: https://github.com/p ...
- react项目中实现搜索关键字呈现高亮状态(一)
最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
随机推荐
- jquery ajax post请求实例
function test(){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"testLogin.aspx ...
- 分布式缓存一致性hash算法
当服务器不多,并且不考虑扩容的时候,可直接使用简单的路由算法,用服务器数除缓存数据KEY的hash值,余数作为服务器下标即可. 但是当业务发展,网站缓存服务需要扩容时就会出现问题,比如3台缓存服务器要 ...
- "cannot be resolved or is not a field"问题解决 (转载)
转自:http://blog.csdn.net/liranke/article/details/16803295 在修改了资源文件后,出现“"cannot be resolved or is ...
- 洛谷 P3254 圆桌问题【最大流】
s向所有单位连流量为人数的边,所有饭桌向t连流量为饭桌容量的边,每个单位向每个饭桌连容量为1的边表示这个饭桌只能坐这个单位的一个人.跑dinic如果小于总人数则无解,否则对于每个单位for与它相连.满 ...
- bzoj 3944: Sum【莫比乌斯函数+欧拉函数+杜教筛】
一道杜教筛的板子题. 两个都是积性函数,所以做法是一样的.以mu为例,设\( f(n)=\sum_{d|n}\mu(d) g(n)=\sum_{i=1}^{n}f(i) s(n)=\sum_{i=1} ...
- 文件系统访问控制ACL设置
1.传统Linux文件系统权限的问题 传统Linux文件系统有三类用户:文件属主-u,组用户-g,其它用户-o,以及三种访问权限:读-r,写-w,执行或目录进入-x,但很多时候并不能满足对文件访问的细 ...
- _bzoj1059 [ZJOI2007]矩阵游戏【二分图匹配】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1059 保存匈牙利模板. #include <cstdio> #include & ...
- CentOS 6.5使用:[3]使用xftp传递文件
先检查CentOS系统是否安装了FTP服务 [root@centos ~]# rpm -qa | grep vsftpd 如果有内容输出,那么恭喜你,你的系统已经安装了ftp服务 如果没有那么按照 ...
- 216 Combination Sum III 组合总和 III
找出所有可能的 k 个数,使其相加之和为 n,只允许使用数字1-9,并且每一种组合中的数字是唯一的.示例 1:输入: k = 3, n = 7输出:[[1,2,4]]示例 2:输入: k = 3, n ...
- vue项目中安装cnpm和node_modules
1.安装cnpm的nodejs包管理工具,命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 每个vue项 ...