代碼如下:
<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,"http://$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}")
