[转载]搜索关键字高亮显示

一般情况下,需要对搜索结果进行高亮显示,主要用到正则匹配,

 好像Lucene搜索引擎保护了高亮显示的处理类,但是在服务器端的,就在返回的结果里面就处理了,

js 代码

  1. /*----------------------------------------*\   
  2.  * 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)  
  3.  * 参数说明:   
  4.  * obj: 对象, 要进行高亮显示的html标签节点.   
  5.  * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .   
  6.  * cssClass: 字符串, 定义关键词突出显示风格的css伪类.   
  7.  * 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu  
  8. \*----------------------------------------*/    
  9. function MarkHighLight(obj,hlWords,cssClass){   
  10.   
  11.     hlWords=AnalyzeHighLightWords(hlWords);   
  12.        
  13.     if(obj==null || hlWords.length==0)   
  14.         return;   
  15.     if(cssClass==null)   
  16.         cssClass="highlight";   
  17.     MarkHighLightCore(obj,hlWords);   
  18.        
  19.     //------------执行高亮标记的核心方法----------------------------   
  20.     function MarkHighLightCore(obj,keyWords){   
  21.         var re=new RegExp(keyWords, "i");    
  22.            
  23.         for(var i=0; i<obj.childNodes.length; i++){   
  24.            
  25.             var childObj=obj.childNodes[i];   
  26.             if(childObj.nodeType==3){   
  27.                 if(childObj.data.search(re)==-1)continue;    
  28.                 var reResult=new RegExp("("+keyWords+")""gi");    
  29.                 var objResult=document.createElement("span");   
  30.                 objResult.innerHTML=childObj.data.replace(reResult,"<span class='"+cssClass+"'>$1</span>");                        
  31.                 if(childObj.data==objResult.childNodes[0].innerHTML) continue;    
  32.                 obj.replaceChild(objResult,childObj);                                         
  33.             }else if(childObj.nodeType==1){   
  34.                 MarkHighLightCore(childObj,keyWords);   
  35.             }   
  36.         }   
  37.     }           
  38.   
  39.     //----------分析关键词----------------------   
  40.     function AnalyzeHighLightWords(hlWords)   
  41.     {   
  42.         if(hlWords==nullreturn "";   
  43.         hlWords=hlWords.replace(/\s+/g,"|").replace(/\|+/g,"|");               
  44.         hlWords=hlWords.replace(/(^\|*)|(\|*$)/g, "");   
  45.            
  46.         if(hlWords.length==0) return "";   
  47.         var wordsArr=hlWords.split("|");    
  48.            
  49.         if(wordsArr.length>1){   
  50.             var resultArr=BubbleSort(wordsArr);   
  51.             var result="";   
  52.             for(var i=0;i<resultArr.length;i++){   
  53.                 result=result+"|"+resultArr[i];   
  54.             }                   
  55.             return result.replace(/(^\|*)|(\|*$)/g, "");   
  56.   
  57.         }else{   
  58.             return hlWords;   
  59.         }    
  60.     }       
  61.        
  62.     //-----利用冒泡排序法把长的关键词放前面-----       
  63.     function BubbleSort(arr){           
  64.         var temp, exchange;       
  65.         for(var i=0;i<arr.length;i++){               
  66.             exchange=false;                   
  67.             for(var j=arr.length-2;j>=i;j--){                   
  68.                 if((arr[j+1].length)>(arr[j]).length){                       
  69.                     temp=arr[j+1]; arr[j+1]=arr[j]; arr[j]=temp;   
  70.                     exchange=true;   
  71.                 }   
  72.             }                   
  73.             if(!exchange)break;   
  74.         }   
  75.         return arr;               
  76.     }   
  77.   
  78. }   
  79. //----------------end------------------------  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值