JavaScript正则表达式让文章内容的指定关键字高亮加粗显示

JavaScript正则表达式让文章内容的指定关键字高亮;

可以分为单个词语高亮,和多个词语高亮的;

首先看单个词语的正则表达式匹配高亮

下面是一个常用方法

<body>
<p id="txt">“6·26国际禁毒日”即将到来。14日,广东省禁毒办召开新闻发布会透露,2015年至今两年多来,广东已破获海上走私毒品案135起,抓获273人,缴获各类毒品5.75吨,查扣船只11艘。
广东省禁毒办常务副主任、省公安厅禁毒局局长邓建伟介绍,广东一直是全国禁毒工作最重要的省份之一,禁毒工作任务异常繁重。他透露,2015年至今,广东禁毒部门将集中打击海上毒品走私活动列入专题,多次与海关缉私部门、海警、边防等多部门联手探索、打击海上毒品走私。广东还建立重奖奖励机制,其中,汕尾市公安局就规定,对群众举报破获的海上走私毒品案件,最高可给予800万元人民币奖励。
</p>
<script type="text/javascript">
txt.innerHTML = txt.innerHTML.replace(/禁毒/gi,"<font color=red>禁毒</font>");
</script>
</body>

全文匹配”禁毒”这个词;如果找到了,用加红加粗的 style去替换;

多个词组匹配

txt.innerHTML = txt.innerHTML.replace(/(禁毒)|(广东)|(走私)/gi,"<font color=red>$1$2$3</font>");

或者用下面的这个

document.body.innerHTML = document.body.innerHTML.replace(/(禁毒)|(广东)|(走私)/gi,"<font color=orange>$1$2$3</font>");

下面是一个匹配全文,遇到匹配词高亮显示的;代码如下;

可以参考下

 <!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>

~~

未经允许不得转载:WEB前端开发 » JavaScript正则表达式让文章内容的指定关键字高亮加粗显示

赞 (0)