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

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

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

js 代码

/*----------------------------------------*\
 * 使用 js 标记高亮关键词 by markcxz([e-mail])
 * 参数说明:
 * 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------------------------

分享到：

电子地图收藏网址 | J2ME实现的通讯录程式

• 2007-02-12 11:48
• 浏览 2877
• 评论(1)
• 查看更多

评论

1 楼 gw_noah 2008-01-08  

         有点启发