高亮功能主要是指在頁面中指定區域的指定文字進行高亮顯示，也就是背景著色。一般在搜尋結果頁面會常用到這個功能。 下面就提供大家一個解決方案，用javascript實現。 首先在中引入下面javascript方法： 複製程式碼 程式碼如下: <br /> //<![CDATA[ <br /> //--------begin function fHl(o, flag, rndColor, url)------------------// <br /> function fHl(o, flag, rndColor, url){ <br /> /// <summary><br /> /// 使用 javascript HTML DOM 高亮顯示頁面特定字詞.<br /> /// 實例:<br /> /// fHl(document.body, '紙傘|她'); <br /> /// 這裡的body指高亮body裡面的內容物。 <br /> /// fHl(document.body, '希望|愁怨', false, '/'); <br /> /// fHl(document.getElementById('at_main'), '獨自|飄過|悠長', true, 'search.asp?keyword='); <🎜|飄過|悠長', true, 'search.asp?keyword='); <🎜| /// 這裡的'at_main』指高亮id='at_main'的div裡面的內容。 search.asp?keyword=指給關鍵字加的連結位址，<br /> /// 我這裡加了一個參數，後面要使用。可以是任意的地址。 <br /> /// <br /> /// <param name="o" type="Object"><br /> /// 物件, 要進行高亮顯示的物件. <br /> /// <br /> /// <param name="flag" type="String"><br /> /// 字串, 進行高亮的字或多個字, 使用 垂直槓(|) 分隔多個字 . <br /> /// <br /> /// <param name="rndColor" type="Boolean"><br /> /// 布林值, 是否隨機顯示文字背景色與文字顏色, true 表示隨機顯示. <br /> /// <br /> /// <param name="url" type="String"><br /> /// URI, 是否為高亮的字加上連結.<br /> /// <br /> /// <return><br /> var bgCor=fgCor=''; <br /> if(rndColor){ <br /> bgCor=fRndCor(10, 20); <br /> fgCor=fRndCor(230, 255); <br /> } else { <br /> bgCor='#F0F'; <br /> fgCor='black'; <br /> } <br /> var re=new RegExp(flag, 'i'); <br /> for(var i=0; i<o.childNodes.length; i ){ <br /> var o_=o.childNodes[i]; <br /> var o_p=o_.parentNode; <br /> if(o_.nodeType==1) { <br /> fHl(o_, flag, rndColor, url); } else if (o_.nodeType==3) { <br /> if(!(o_p.nodeName=='A')){ <br /> if(o_.data.search(re)==-1)continue; <br /> var temp=fEleA(o_.data, flag); <br /> o_p.replaceChild(temp, o_); <br /> } <br /> }<br /> } <br /> //------------------------------------------------ <br /> function fEleA(text, flag){ <br /> var style=' style="background-color:' bgCor ';color:' fgCor ';" ' <br /> var o=document.createElement('span'); <br /> var str=''; <br /> var re=new RegExp('(' flag ')', 'gi'); <br /> if(url){ <br /> str=text.replace(re, '<a href="' url <br /> '$1"' style '>$1'); //這裡是給關鍵字加鏈接，紅色的$1是指上面連結位址後的特定參數。<br /> } else { <br /> str=text.replace(re, '<span ' style '>$1'); //不加連結時顯示<br /> } <br /> o.innerHTML=str; <br /> return o; <br /> } <br /> //------------------------------------------------ <br /> function fRndCor(under, over){ <br /> if(arguments.length==1){ <br /> var over=under; <br /> under=0; <br /> }else if(arguments.length==0){ <br /> var under=0; <br /> var over=255; <br /> } <br /> var r=fRandomBy(under, over).toString(16); <br /> r=padNum(r, r, 2); <br /> var g=fRandomBy(under, over).toString(16); <br /> g=padNum(g, g, 2); <br /> var b=fRandomBy(under, over).toString(16); <br /> b=padNum(b, b, 2); <br /> //defaultStatus=r ' ' g ' ' b <br /> return '#' r g b; <br /> function fRandomBy(under, over){ <br /> switch(arguments.length){ <br /> case 1: return parseInt(Math.random()*under 1); <br /> case 2: return parseInt(Math.random()*(over-under 1) under); <br /> default: return 0; <br /> } <br /> }<br /> function padNum(str, num, len){ <br /> var temp='' <br /> for(var i=0; i<len;temp =num, i ); <br /> return temp=(temp =str).substr(temp.length-len); <br /> } <br /> } <br /> }<br /> //--------end function fHl(o, flag, rndColor, url)--------------------// <br /> //]]> <br /> 上面的fHl方法就是用來實現高亮的，參數的意義在註解中有寫。 然後在頁面最後呼叫fHl方法，對指定區域指定文字高亮著色，例如： 複製程式碼 程式碼如下: <br /> fHl(document.body, '高光澤'); //對頁面body的區域中的「高亮」文字背景著色<br /> 怎麼樣，很簡單吧~
