查询绑定数据岛的表格中的文本并修改显示方式的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 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
node.js通过url读取文件
Oct 16 Javascript
Javascript使用integrity属性进行安全验证
Nov 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
jQuery 联动日历实现代码
2012/05/31 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
JS实现星星海特效
2019/12/24 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Python入门篇之函数
2014/10/20 Python
python正则表达式之作业计算器
2016/03/18 Python
Django 视图层(view)的使用
2018/11/09 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
基于python实现模拟数据结构模型
2020/06/12 Python
使用K.function()调试keras操作
2020/06/17 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python os.rename实例用法详解
2020/12/06 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
安全责任书范文
2014/08/25 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年教师节活动总结
2015/03/20 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫