A-A+

如何用正则把网页中的指定的字高亮显示代码

2016年01月20日 前端设计 暂无评论 阅读 4 views 次

如何用正则把网页中的指定的字高亮显示代码,有需要的朋友可参考一下,不劳而获一次,这个子虚乌有前辈已经给出了非常好的解决方案,我直接把代码贴出来了:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head>   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  6. <META name="Author" content="Sheneyan" />   
  7. <script type="text/javascript">   
  8. function encode(s){   
  9.   return  s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/([\.*[]()$^])/g,"\$1");   
  10. }   
  11. function decode(s){   
  12.   return  s.replace(/\([\.*[]()$^])/g,"$1").replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/g,"&");   
  13. }   
  14. function highlight(s){   
  15.   if (s.length==0){   
  16.  alert('搜索关键词未填写!');   
  17.  return false;   
  18.   }   
  19.   s=encode(s);   
  20.   var obj=document.getElementsByTagName("body")[0];   
  21.   var t=obj.innerHTML.replace(/<spans+class=.?highlight.?>([^<>]*)</span>/gi,"$1");   
  22.   obj.innerHTML=t;   
  23.   var cnt=loopSearch(s,obj);   
  24.   t=obj.innerHTML   
  25.   var r=/{searchHL}(({(?!/searchHL})|[^{])*){/searchHL}/g   
  26.   tt=t.replace(r,"<span class='highlight'>$1</span>");   
  27.   obj.innerHTML=t;   
  28.   alert("搜索到关键词"+cnt+"处")   
  29. }   
  30. function loopSearch(s,obj){   
  31.   var cnt=0;   
  32.   if (obj.nodeType==3){   
  33.  cnt=replace(s,obj);   
  34.  return cnt;   
  35.   }   
  36.   for (var i=0,c;c=obj.childNodes[i];i++){   
  37.  if (!c.className||c.className!="highlight")   
  38.  cnt+=loopSearch(s,c);   
  39.   }   
  40.   return cnt;   
  41. }   
  42. function replace(s,dest){   
  43.   var r=new RegExp(s,"g");   
  44.   var tm=null;   
  45.   var t=dest.nodeValue;   
  46.   var cnt=0;   
  47.   if (ttm=t.match(r)){   
  48.  cnt=tm.length;   
  49.  tt=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")   
  50.  dest.nodeValue=t;   
  51.   }   
  52.   return cnt;   
  53. }   
  54. </script>   
  55. <style type="text/css">   
  56. .highlight{background:green;font-weight:bold;color:white;}   
  57. </style>   
  58. </head>   
  59. <body>   
  60. <form onsubmit="highlight(this.s.value);return false;">   
  61. <p><input name="s" id="s" title="搜索内容:"/><input type="submit" value="搜索"/></p>   
  62. </form>   
  63. <div id="content">   
  64. 测试高亮的代码。很长很长的代码……………………   
  65. </div>   
  66. </body>   
  67. </html>  

给我留言