使用 javascript 标记高亮关键词

使用 javascript 标记高亮关键词

一个将指定html标签内特定关键词高亮显示的javascript 函数。

     /* ----------------------------------------*\ 
     * 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
     * 参数说明: 
     * obj: 对象, 要进行高亮显示的html标签节点. 
     * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 . 
     * cssClass: 字符串, 定义关键词突出显示风格的css伪类. 
     * 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
    \*---------------------------------------- */  
     function  MarkHighLight(obj,hlWords,cssClass){
    
        hlWords = AnalyzeHighLightWords(hlWords);
        
         if (obj == null   ||  hlWords.length == 0 )
             return ;
         if (cssClass == null )
            cssClass = " highlight " ;
        MarkHighLightCore(obj,hlWords);
        
         // ------------执行高亮标记的核心方法----------------------------
         function  MarkHighLightCore(obj,keyWords){
             var  re = new  RegExp(keyWords,  " i " ); 
            
             for ( var  i = 0 ; i < obj.childNodes.length; i ++ ){
            
                 var  childObj = obj.childNodes[i];
                 if (childObj.nodeType == 3 ){
                     if (childObj.data.search(re) ==- 1 ) continue ; 
                     var  reResult = new  RegExp( " ( " + keyWords + " ) " ,  " gi " ); 
                     var  objResult = document.createElement( " span " );
                    objResult.innerHTML = childObj.data.replace(reResult, " <span class=' " + cssClass + " '>$1</span> " );                     
                     if (childObj.data == objResult.childNodes[ 0 ].innerHTML)  continue ; 
                    obj.replaceChild(objResult,childObj);                                      
                } else   if (childObj.nodeType == 1 ){
                    MarkHighLightCore(childObj,keyWords);
                }
            }
        }        

         // ----------分析关键词----------------------
         function  AnalyzeHighLightWords(hlWords)
        {
             if (hlWords == null )  return   "" ;
            hlWords = hlWords.replace( / \s +/ g, " | " ).replace( / \ |+/ g, " | " );            
            hlWords = hlWords.replace( / ( ^ \ |* ) | (\ |* $) / g,  "" );
            
             if (hlWords.length == 0 )  return   "" ;
             var  wordsArr = hlWords.split( " | " ); 
            
             if (wordsArr.length > 1 ){
                 var  resultArr = BubbleSort(wordsArr);
                 var  result = "" ;
                 for ( var  i = 0 ;i < resultArr.length;i ++ ){
                    result = result + " | " + resultArr[i];
                }                
                 return  result.replace( / ( ^ \ |* ) | (\ |* $) / g,  "" );

            } else {
                 return  hlWords;
            } 
        }    
        
         // -----利用冒泡排序法把长的关键词放前面-----    
         function  BubbleSort(arr){        
             var  temp, exchange;    
             for ( var  i = 0 ;i < arr.length;i ++ ){            
                exchange = false ;                
                 for ( var  j = arr.length - 2 ;j >= i;j -- ){                
                     if ((arr[j + 1 ].length) > (arr[j]).length){                    
                        temp = arr[j + 1 ]; arr[j + 1 ] = arr[j]; arr[j] = temp;
                        exchange = true ;
                    }
                }                
                 if ( ! exchange) break ;
            }
             return  arr;            
        }
    
    }
     // ----------------end------------------------

在线演示

posted on 2007-07-15 09:52  cncxz(虫虫) 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/cncxz/archive/2007/07/15/818508.html