JavaScript enables keyword highlighting

Highlighting mainly refers to highlighting the specified text in the specified area of the page, that is, the background color. This feature is often used in search results pages.

The following is to provide you with a solution, with javascript implementation.

In the first place in < Head> To introduce the following javascript methods:

<script type="text/javascript">

//<![CDATA[ 

    //--------begin function fHl(o, flag, rndColor, url)------------------// 

    function fHl(o, flag, rndColor, url){ 

        /// <summary>

        ///         Use javascript HTML DOM to highlight page specific words
        ///         Example: < br / >
        ///                 FHl (document.body, 'paper umbrella | she '); < br / >
        ///                 So the body here is highlighting what's inside the body. < br / >
        ///                 FHl (document.body, 'hope | worry ', false, '/'); < br / >
        ///                 FHl (document.getelementbyid ('at_main'), 'alone | floats over | long ', true, 'search.asp? Keyword = '); < br / >
        ///                 The 'at_main' here is the div inside the highlighted id='at_main' div. Search. Asp & # 63; Keyword = refers to the address of a link to a keyword, 

        ///                 I've added a parameter here, which I'll use later. It could be any address.               < br / >
        /// </summary>

        /// <param name="o" type="Object">

        ///         Object to be highlighted. 

        /// </param>

        /// <param name="flag" type="String">

        ///         A string of words or words to be highlighted, separated by a bar (|). 

        /// </param>

        /// <param name="rndColor" type="Boolean">

        ///         Boolean value, whether to randomly display text background color and text color, true means random display. 

        /// </param>

        /// <param name="url" type="String">

        ///         URI, whether to add links to highlighted words.

        /// </param>                        

        /// <return></return>

        var bgCor=fgCor=''; 

        if(rndColor){ 

            bgCor=fRndCor(10, 20); 

            fgCor=fRndCor(230, 255); 

        } else { 

            bgCor='#F0F'; 

            fgCor='black'; 

        } 

        var re=new RegExp(flag, 'i'); 

        for(var i=0; i<o.childNodes.length; i++){     

            var o_=o.childNodes[i]; 

            var o_p=o_.parentNode; 

            if(o_.nodeType==1) { 

                fHl(o_, flag, rndColor, url);                 

             } else if (o_.nodeType==3) { 

                if(!(o_p.nodeName=='A')){ 

                    if(o_.data.search(re)==-1)continue; 

                    var temp=fEleA(o_.data, flag); 

                    o_p.replaceChild(temp, o_); 

                } 

            }

        } 

        //------------------------------------------------ 

        function fEleA(text, flag){ 

            var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' 

            var o=document.createElement('span'); 

            var str=''; 

            var re=new RegExp('('+flag+')', 'gi'); 

            if(url){ 

                str=text.replace(re, '<a href="'+url+ 

                '$1"'+style+'>$1</a>'); //Here is to link the keyword, the red $1 refers to the above link address after the specific parameters. < br / >
            } else { 

                str=text.replace(re, '<span '+style+'>$1</span>'); //Displays 
 when not linked
            } 

            o.innerHTML=str; 

            return o; 

        } 

        //------------------------------------------------ 

        function fRndCor(under, over){ 

            if(arguments.length==1){ 

                var over=under; 

                    under=0; 

            }else if(arguments.length==0){ 

                var under=0; 

                var over=255; 

            } 

            var r=fRandomBy(under, over).toString(16); 

                r=padNum(r, r, 2); 

            var g=fRandomBy(under, over).toString(16); 

                g=padNum(g, g, 2); 

            var b=fRandomBy(under, over).toString(16); 

                b=padNum(b, b, 2); 

                //defaultStatus=r+' '+g+' '+b 

            return '#'+r+g+b; 

            function fRandomBy(under, over){ 

                switch(arguments.length){ 

                    case 1: return parseInt(Math.random()*under+1); 

                    case 2: return parseInt(Math.random()*(over-under+1) + under); 

                    default: return 0; 

                } 

            }

            function padNum(str, num, len){ 

                var temp='' 

                for(var i=0; i<len;temp+=num, i++); 

                return temp=(temp+=str).substr(temp.length-len); 

            } 

        } 

    }

    //--------end function fHl(o, flag, rndColor, url)--------------------// 

//]]> 

</script>

The above fHl method is used for highlighting, and the meaning of the parameters is written in the comments.

The fHl method is then called at the end of the page to highlight the text in the specified area, for example:

<script type="text/javascript">

fHl(document.body, ' The highlighted ');   //Color the "highlighted" text background in the body area of the page 

</script>

Well, isn't it easy