html实现高亮检索
2024-09-07 19:51:19
实现效果如下:
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>serch</title>
<script type="text/javascript" src="http://www.roseonly.com.cn/scripts/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textSearch-1.0.js"></script>
</head> <body> <script>
function ss_search(){
$("body").textSearch($('#text').val(),{callback:function(){
$('body').scrollTop($('span[rel=mark]').offset().top);
}});
}
</script> <input type="text" id="text"/> <a href="javascript:void(0);" onClick="ss_search();">搜索</a>
<p>
输入我的字符
</p>
输入我的字符
<p>
输入我的字符
</p>
</body> </html>
jquery.textSearch-1.0.js
// 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 === ""){
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,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>");
a[i] = c;
}
});
//将支离数组重新组成字符串
var new_html = a.join(""); $(this).html(new_html); if(test === 0 && sets.nullReport){
alert("没有搜索结果");
return false;
} //执行回调函数
sets.callback();
});
};
})(jQuery);
最新文章
- 黄聪:如何给wordpress的编辑器添加一个自定义按钮,并且实现插入功能
- android四大组件(简单总结)
- PHP语法基础
- MVC随笔之基础数据维护(MVC4+Boostrap)
- mybatis关联查询,一对一,一对多
- Linux Buffers和Cached的区别(转)
- 2016年象行中国(上海站)圆满结束,会议PPT分享
- odoo关联表查询方法
- angular2 国际化实现
- js解决快速回车重复订单提交(客户端方式)
- 系统性能监控之vmstat和iostat命令
- iOS 制作发布证书,发布到App Store
- WPF-24:绘制正多边形
- Python 线程池的实现
- 2018,你与 i 春秋的故事都在这
- 改变highCharts的X轴和Y轴的数据刻度
- wx 参数传值
- where field in
- Python Socket通信例子
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题