萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript實現頁面內關鍵詞高亮顯示代碼

javascript實現頁面內關鍵詞高亮顯示代碼

 關鍵詞高亮想必大家對它都不陌生吧,應用也比較廣泛的,下面為大家介紹下通過javascript是如何實現頁面內關鍵詞高亮顯示

代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />  <title>關鍵字高亮顯示</title>  </head>  <body>  <div class="result" id="textbox">  <p>百度(Nasdaq簡稱:BIDU)是全球最大的中文搜索引擎,2000年1月由李彥宏、徐勇兩人創立於北京中關村,致力於向人們提供“簡單,可依賴”的</p>  <p>信息獲取方式。“百度”二字源於中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾裡尋他千百度”,象征著百度對中文信息檢索技術的執著追求。</p>  </div>  <script>  function highlight(idVal, keyword) {  var textbox = document.getElementById(idVal);  if ("" == keyword) return;  //獲取所有文字內容  var temp = textbox.innerHTML;  console.log(temp);  var htmlReg = new RegExp("<.*?>", "i");  var arr = new Array();    //替換HTML標簽  for (var i = 0; true; i++) {  //匹配html標簽  var tag = htmlReg.exec(temp);  if (tag) {  arr[i] = tag;  } else {  break;  }  temp = temp.replace(tag, "{[(" + i + ")]}");  }      // 講關鍵詞拆分並入數組  words = decodeURIComponent(keyword.replace(/,/g, ' ')).split(/s+/);    //替換關鍵字  for (w = 0; w < words.length; w++) {  // 匹配關鍵詞,保留關鍵詞中可以出現的特殊字符  var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|[]]/g, "$&") + ")", "ig");  temp = temp.replace(r, "<b style='color:Red;'>$1</b>");  }    //恢復HTML標簽  for (var i = 0; i < arr.length; i++) {  temp = temp.replace("{[(" + i + ")]}", arr[i]);  }  textbox.innerHTML = temp;  }  highlight("textbox","百度,李彥宏");  </script>  </body>  </html>   
copyright © 萬盛學電腦網 all rights reserved