当前位置: 编程技术>jquery
Jquery实现高亮搜索结果
来源: 互联网 发布时间:2014-09-03
本文导语: 需求描述: 使用jquery实现高亮搜索结果。 代码: 代码示例: // by zhangxixnu 2010-06-21 http://www.zhangxinxu.com/ // textSearch.js v1.0 文字,关键字的页面纯客户端搜索 // 2010-06-23 修复多字母检索标签破碎的问题 // 2010-06-29 修复页面注...
需求描述:
使用jquery实现高亮搜索结果。
代码:
代码示例:
// by zhangxixnu 2010-06-21 http://www.zhangxinxu.com/
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索
// 2010-06-23 修复多字母检索标签破碎的问题
// 2010-06-29 修复页面注释显示的问题
/*
示例:
$(document).ready(function () {
$('.content').textSearch('',{markColor: "Red"});
});
*/
(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 = "+sets.markColor+";'";
}
//对前一次高亮处理的文字还原
$("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
//字符串正则表达式关键字转化
$.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 = /[^]+|/g;
var a = v_html.match(tags), test = 0;
$.each(a, function(i, c){
if(!//.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;
} // www.
});
c = c.replace(/♂/g,"").replace(/♀/g,"");
a[i] = c;
}
});
//将支离数组重新组成字符串
var new_html = a.join("");
$(this).html(new_html);
if(test === 0 && sets.nullReport){
alert("没有搜索结果");
return false;
}
//执行回调函数
sets.callback();
});
};
})(jQuery);
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索
// 2010-06-23 修复多字母检索标签破碎的问题
// 2010-06-29 修复页面注释显示的问题
/*
示例:
$(document).ready(function () {
$('.content').textSearch('',{markColor: "Red"});
});
*/
(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 = "+sets.markColor+";'";
}
//对前一次高亮处理的文字还原
$("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
//字符串正则表达式关键字转化
$.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 = /[^]+|/g;
var a = v_html.match(tags), test = 0;
$.each(a, function(i, c){
if(!//.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;
} // www.
});
c = c.replace(/♂/g,"").replace(/♀/g,"");
a[i] = c;
}
});
//将支离数组重新组成字符串
var new_html = a.join("");
$(this).html(new_html);
if(test === 0 && sets.nullReport){
alert("没有搜索结果");
return false;
}
//执行回调函数
sets.callback();
});
};
})(jQuery);