js正则 - 指定文字高亮显示

2008-12-11 09:32:25 作者:子虚乌有 | 【大中小】

JavaScript正则表达式可以替换搜索结果中的关键字为高亮显示

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 <META name="Author" content="Sheneyan" /> 
 <script type="text/javascript"> 
 function encode(s){ 
   return  s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1"); 
 } 
 function decode(s){ 
   return  s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/g,"&"); 
 } 
 function highlight(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 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,"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> 
 <style type="text/css"> 
 .highlight{background:green;font-weight:bold;color:white;} 
 </style> 
 </head> 
 <body> 
 <form onsubmit="highlight(this.s.value);return false;"> 
 <p><input name="s" id="s" title="搜索内容："/><input type="submit" value="搜索"/></p> 
 </form> 
 <div id="content"> 
 测试高亮的代码。很长很长的代码…………………… 
 </div> 
 </body> 
 </html>

推荐给朋友

上一篇： js正则 - 给属性添加双引号
下一篇：选项卡定时自动切换的代码

js正则 - 指定文字高亮显示

相关资源