zoukankan      html  css  js  c++  java
  • 使用 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==nullreturn "";
                hlWords
    =hlWords.replace(/\s+/g,"|").replace(/\|+/g,"|");            
                hlWords
    =hlWords.replace(/(^\|*)|(\|*$)/g, "");
                
                
    if(hlWords.length==0return "";
                
    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;            
            }
        
        }
  • 相关阅读:
    scss-@for 指令
    scss-@else if指令
    pandas dataframe在指定的位置添加一列, 或者一次性添加几列,re
    数据挖掘之Python调用R包、函数、脚本
    数据挖掘之各种聚类算法的比较 (转载)
    数据挖掘之分类算法概述与比较(转载)
    数据挖掘之数据规范化
    数据分析之集成算法
    数据分析之随机森林
    数据挖掘之数据规约
  • 原文地址:https://www.cnblogs.com/top5/p/2034255.html
Copyright © 2011-2022 走看看