首頁 > 開發者 > JavaScript

使用 javascript HTML DOM 高亮顯示頁面特定字詞 By shawl.qiu

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用 javascript HTML DOM 高亮顯示頁面特定字詞 By shawl.qiu

說明: 
這個主要應用於搜尋結果上, 高亮顯示搜尋到的相關詞句. 

寫這個函數主要是前幾天在CSDN社區JS版一個網友有這麼一個需求, 當時草草寫了一個簡單點的函數實現高亮顯示頁面特定詞句.

不過後來發現這個功能很不錯, 就找時間完善了一下. 
最後效果還行, 唯一不足的地方在於高亮顯示的時候, 同一個詞可能會有多種顏色. 
其實要一個詞只顯示一個顏色並不難, 不過那要耗費更多的代碼去判斷, 因此也就不完善該功能呢.  

函數 fHl(o, flag, rndColor, url) 參數說明:

    linenum

  1. /*----------------------------------------*/
  2.  * 使用 javascript HTML DOM 高亮顯示頁面特定字詞 By shawl.qiu
  3.  * 參數說明:
  4.  * o: 對象, 要進行高亮顯示的對象.
  5.  * flag: 字串, 要進行高亮的詞或多個詞, 使用 豎杠(|) 分隔多個詞 .
  6.  * rndColor: 布爾值, 是否隨機顯示文字背景色與文字顏色, true 表示隨機顯示.
  7.  * url: URI, 是否對高亮的詞添加連結. 
  8. /*----------------------------------------*/ 

shawl.qiu 
2006-11-12
http://blog.csdn.net/btbtd

函數 fHl(o, flag, rndColor, url) 源碼及使用示範: 

    linenum

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.     onload=function(){
  10.         fHl(document.body, '紙傘|她');
  11.         fHl(document.body, '丁香|雨巷', true);
  12.         
  13.         fHl(document.body, '希望|愁怨', false, '/');
  14.         fHl(document.getElementById('at_main'), '獨自|飄過|悠長', true, '/');
  15.         
  16. /*         fHl(document.body, '紙傘');
  17.         fHl(document.body, '她', false, '/');
  18.         fHl(document.body, '丁香', true, '/');
  19.         fHl(document.body, '雨巷', true, '/');
  20.         
  21.         fHl(document.body, '希望', false);
  22.         fHl(document.body, '愁怨', true); */
  23.         
  24. /*         fHl(document.body, '丁香', 'blue', 'white', '/');
  25.         fHl(document.body, '雨巷', 'gray', 'white', '/');
  26.         fHl(document.body, '獨自', 'white', 'red');
  27.         fHl(document.body, '悠長', 'white', 'red');
  28.         fHl(document.body, '飄過'); */
  29.     }
  30.     /*----------------------------------------*/
  31.      * 使用 javascript HTML DOM 高亮顯示頁面特定字詞 By shawl.qiu
  32.      * 參數說明:
  33.      * o: 對象, 要進行高亮顯示的對象.
  34.      * flag: 字串, 要進行高亮的詞或多個詞, 使用 豎杠(|) 分隔多個詞 .
  35.      * rndColor: 布爾值, 是否隨機顯示文字背景色與文字顏色, true 表示隨機顯示.
  36.      * url: URI, 是否對高亮的詞添加連結. 
  37.     /*----------------------------------------*/
  38.     //--------begin function fHl(o, flag, rndColor, url)------------------//
  39.     function fHl(o, flag, rndColor, url){
  40.         var bgCor=fgCor='';
  41.         if(rndColor){
  42.             bgCor=fRndCor(10, 20);
  43.             fgCor=fRndCor(230, 255);
  44.         } else {
  45.             bgCor='yellow';
  46.             fgCor='black';
  47.         }
  48.         var re=new RegExp(flag, 'i');
  49.         for(var i=0; i<o.childNodes.length; i++){    
  50.             var o_=o.childNodes[i];
  51.             var o_p=o_.parentNode;
  52.             if(o_.nodeType==1) {
  53.                 fHl(o_, flag, rndColor, url);                
  54.              } else if (o_.nodeType==3) {
  55.                 if(!(o_p.nodeName=='A')){
  56.                     if(o_.data.search(re)==-1)continue;
  57.                     var temp=fEleA(o_.data, flag);
  58.                     o_p.replaceChild(temp, o_);
  59.                 }
  60.             }  // shawl.qiu script
  61.         }
  62.         //------------------------------------------------
  63.         function fEleA(text, flag){
  64.             var style=' style="background-color:'+bgCor+';color:'+fgCor+';" '
  65.             var o=document.createElement('span');
  66.             var str='';
  67.             var re=new RegExp('('+flag+')', 'gi');
  68.             if(url){
  69.                 str=text.replace(re, '<a href="'+url+
  70.                 '"'+style+'>$1</a>');
  71.             } else {
  72.                 str=text.replace(re, '<span '+style+'>$1</span>');
  73.             }
  74.             o.innerHTML=str;
  75.             return o;
  76.         }     // shawl.qiu script
  77.         //------------------------------------------------
  78.         function fRndCor(under, over){
  79.             if(arguments.length==1){
  80.                 var over=under;
  81.                     under=0;
  82.             }else if(arguments.length==0){
  83.                 var under=0;
  84.                 var over=255;
  85.             }
  86.             var r=fRandomBy(under, over).toString(16);
  87.                 r=padNum(r, r, 2);
  88.             var g=fRandomBy(under, over).toString(16);
  89.                 g=padNum(g, g, 2);
  90.             var b=fRandomBy(under, over).toString(16);
  91.                 b=padNum(b, b, 2);
  92.                 //defaultStatus=r+' '+g+' '+b
  93.             return '#'+r+g+b;
  94.             function fRandomBy(under, over){
  95.                 switch(arguments.length){
  96.                     case 1: return parseInt(Math.random()*under+1);
  97.                     case 2: return parseInt(Math.random()*(over-under+1) + under);
  98.                     default: return 0;
  99.                 }
  100.             } // shawl.qiu script
  101.             function padNum(str, num, len){
  102.                 var temp=''
  103.                 for(var i=0; i<len;temp+=num, i++);
  104.                 return temp=(temp+=str).substr(temp.length-len);
  105.             } // shawl.qiu script
  106.         }
  107.     } // shawl.qiu script
  108.     //--------end function fHl(o, flag, rndColor, url)--------------------//
  109. //]]>
  110. </script>
  111. </head>
  112. <body>
  113. <div class="at_main" id="at_main"><p/><b>CITE:</b><cite><div class=u_cite>戴望舒寫女孩<br/>
  114. <br/>
  115. &nbsp;雨  巷&nbsp;<br/>
  116. 撐著油紙傘，獨自&nbsp;<br/>
  117. 彷徨在悠長、悠長&nbsp;<br/>
  118. 又寂寥的雨巷，&nbsp;<br/>
  119. 我希望逢著&nbsp;<br/>
  120. 一個丁香一樣地&nbsp;<br/>
  121. 結著愁怨的姑娘。&nbsp;<br/>
  122. 她是有&nbsp;<br/>
  123. 丁香一樣的顏色，&nbsp;<br/>
  124. 丁香一樣的芬芳，&nbsp;<br/>
  125. 丁香一樣的憂愁，&nbsp;<br/>
  126. 在雨中哀怨，&nbsp;<br/>
  127. 哀怨又彷徨；&nbsp;<br/>
  128. 她彷徨在這寂寥的雨巷，&nbsp;<br/>
  129. 撐著油紙傘&nbsp;<br/>
  130. 像我一樣，&nbsp;<br/>
  131. 像我一樣地&nbsp;<br/>
  132. 默默踟躇著&nbsp;<br/>
  133. 冷漠、淒清，又惆悵。&nbsp;<br/>
  134. 她默默地走近，&nbsp;<br/>
  135. 走近，又投出&nbsp;<br/>
  136. 歎息一般的眼光&nbsp;<br/>
  137. 她飄過&nbsp;<br/>
  138. 像夢一般地，&nbsp;<br/>
  139. 像夢一般地淒婉迷茫。&nbsp;<br/>
  140. 像夢中飄過&nbsp;<br/>
  141. 一枝丁香地，&nbsp;<br/>
  142. 我身旁飄過這個女郎；&nbsp;<br/>
  143. 她默默地遠了，遠了，&nbsp;<br/>
  144. 到了頹圮的籬牆，&nbsp;<br/>
  145. 走盡這雨巷。&nbsp;<br/>
  146. 在雨的哀曲裡，&nbsp;<br/>
  147. 消了她的顏色，&nbsp;<br/>
  148. 散了<a href="/">她</a>的芬芳，&nbsp;<br/>
  149. 消散了，甚至她的&nbsp;<br/>
  150. 歎息般的眼光&nbsp;<br/>
  151. 丁香般的惆悵。&nbsp;<br/>
  152. 撐著油紙傘，獨自&nbsp;<br/>
  153. 彷徨在悠長、悠長&nbsp;<br/>
  154. 又寂寥的雨巷，&nbsp;<br/>
  155. 我希望飄過&nbsp;<br/>
  156. 一個丁香一樣地&nbsp;<br/>
  157. 結著愁怨的姑娘。</div></cite></div>
  158. <span class="left160px"><a href="article.asp?classid=14&nclassid=178&articleid=12830#anchor">戴望舒寫女孩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12819#anchor">悲慘世界 - 第四部 蔔呂梅街的兒女情和聖德尼街的英雄血 - 第五卷　結尾不象開頭 - 四　石頭下面的一顆心</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12835#anchor">青玉案&nbsp;元夕</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12855#anchor">“科學精神”語義分析</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=3053#anchor">再別康橋 －－徐志摩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12862#anchor">學術論文格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12836#anchor">一棵開花的樹</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12840#anchor">書信寫作格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12818#anchor">悲慘世界 - 第四部 蔔呂梅街的兒女情和聖德尼街的英雄血 - 第十二卷　科林斯 - 六　等　待</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12834#anchor">卿雲歌</a></span>
  159. </body>
  160. </html>


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript dom node dom manipulation javascript tutorial javascript dom insertbefore javascript dom childnodes javascript dom class javascript dom table javascript xml dom
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More