使用 javascript 标记高亮关键词

最新推荐文章于 2024-08-13 08:20:49 发布

蝶恋花雨

最新推荐文章于 2024-08-13 08:20:49 发布

阅读量1.8k

点赞数

分类专栏： Jquery And JavaScript 文章标签： javascript exchange function null html css

Jquery And JavaScript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的页面关键词高亮显示方法。通过遍历HTML节点并应用正则表达式来查找匹配的关键词，然后将这些关键词用指定的CSS类进行标记以便于视觉上的突出显示。此功能适用于搜索结果页面等需要对查询词进行突出的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  /*----------------------------------------*/
     * 使用 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------------------------

在线演示