查询绑定数据岛的表格中的文本并修改显示方式的js代码


Posted in Javascript onDecember 15, 2009
<script language="JavaScript"> 
function findAll(s){ 
if(s.length==0){ 
alert("请输入查询关键字"); 
} s=encode(s); 
var TDs=document.all.DataT1.all.tags("TD"); 
var num=0; 
for(var i=0;i<TDs.length;i++){ 
var tdObj=TDs[i]; 
var obj=tdObj.childNodes[0]; 
if(!obj.className || obj.className!="highlight"){ 
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1"); 
obj.innerHTML=t; 
var cnt=loopSearch(s,obj); 
t=obj.innerHTML; 
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g; 
t=t.replace(r,"<span class='highlight'>$1</span>"); 
obj.innerHTML=t; 
num=num+cnt; 
} 
} 
alert("查找到关键字"+num+"处"); 
} 
function encode(s){ 
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1"); 
} 
function decode(s){ 
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&"); 
} 
function loopSearch(s,obj){ 
var cnt=0; 
if(obj.nodeType==3){ 
cnt=replace(s,obj); 
return cnt; 
} 
for(var i=0,c;c=obj.childNodes[i];i++){ 
if(!c.className || c.className!="highlight") 
cnt+=loopSearch(s,c); 
} 
return cnt; 
} 
function replace(s,dest){ 
var r=new RegExp(s,"gi"); 
var tm=null; 
var t=dest.nodeValue; 
var cnt=0; 
var arr=new Array(); 
var a=""; 
var b=""; 
if(tm=t.match(r)){ 
cnt=tm.length; 
a=tm.toString(); 
arr=a.split(","); 
for(var i=0;i<arr.length;i++) 
b="{searchHL}"+arr[i]+"{/searchHL}"; 
t=t.replace(r,b); 
dest.nodeValue=t; 
} 
return cnt; 
} 
</script> 
<style type="text/css"> 
.highlight{background:blue;font-weigh:bold;color:black;} 
</style>

以上方法需要注意的有两点:1,在findAll 中obj取到最小单位,否则的话替换会出乱,我在实践中体会这一点主要是和数据岛绑定有关,一般的文本是不需要这么小心的.2,replace方法将tm拆分成数组,也和表格有关,一般的文本不需要拆分

如果是一般的文本可以如下写

<script language="JavaScript"> 
function findAll(s){ 
if (s.length==0){ 
alert('搜索关键词未填写!'); 
return false; 
} 
s=encode(s); 
var obj=document.getElementsByTagName("body")[0]; 
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1"); 
obj.innerHTML=t; 
var cnt=loopSearch(s,obj); 
t=obj.innerHTML 
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g 
t=t.replace(r,"<span class='highlight'>$1</span>"); 
obj.innerHTML=t; 
alert("搜索到关键词"+cnt+"处") 
} 
function replace(s,dest){ 
var r=new RegExp(s,"g"); 
var tm=null; 
var t=dest.nodeValue; 
var cnt=0; 
if (tm=t.match(r)){ 
cnt=tm.length; 
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}") 
dest.nodeValue=t; 
} 
return cnt; 
} </script>

html部分

<XML ID="DataBinding1" SRC="datasource.xml"></XML> 
<body> 
<input name="s" id="s" title="搜索内容:"/><input type="submit" value="搜索" onClick="findAll(s.value);return false;"/> 
<table width="100%" valign="top" DATASRC="#DataBinding1" id="DataT1" BORDER="1" CELLPADDING="3"> 
<thead> 
<tr> 
<th>ID</th> 
<th>Name</th> 
<th>Desc</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><span name="ID" id="ID" datafld="CODE_ID"> </span></td> 
<td><span name="name" id="name" datafld="CODE_NAME"> </span></td> 
<td><span name="desc" id="desc" datafld="CODE_DESC"> </span></td> 
</tr> 
</tbody> 
</table> 
</body>

<?xml version="1.0" encoding="UTF-8"?> 
<INVENTORY> 
<ROW> 
<CODE_ID>PCOMM11</CODE_ID> 
<CODE_NAME>caracter handle</CODE_NAME> 
<CODE_DESC>hkdlhglfghfkgfk</CODE_DESC> 
</ROW> 
<ROW> 
<CODE_ID>PCOMM12</CODE_ID> 
<CODE_NAME>digital handle</CODE_NAME> 
<CODE_DESC>hkdlhglfghfkgfkgggg</CODE_DESC> 
</ROW> 
</INVENTORY>
Javascript 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
React-router4路由监听的实现
Aug 07 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 #Javascript
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 #Javascript
javascript document.execCommand() 常用解析
Dec 14 #Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 #Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 #Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
浅谈Python数据类型之间的转换
2016/06/08 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python 自动去除空行的实例
2018/07/24 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
基于Pytorch SSD模型分析
2020/02/18 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
某科技软件测试面试题
2013/05/19 面试题
《一件运动衫》教学反思
2014/02/19 职场文书
《阳光》教学反思
2014/02/23 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python编程super应用场景及示例解析
2021/10/05 Python