js實現關鍵詞高亮顯示程式碼例項

antzone發表於2017-03-22
JS

關鍵詞高亮效果在很多應用中都有使用，比如搜尋關鍵詞高亮，這可以讓搜尋結果更為醒目，提高了辨識度，是非常人性化的舉措之一，下面就通過程式碼例項介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function highlight(idVal,keyword){ 
  var textbox=document.getElementById(idVal); 
  if(""==keyword) return; 
  //獲取所有文字內容 
  var temp=textbox.innerHTML; 
  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; 
} 
window.onload=function(){
  highlight("textbox","螞蟻,奮鬥");  
}
</script> 
</head> 
<body> 
<div id="textbox">螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</div> 
</body> 
</html>

以上程式碼實現了我們的要求，可以將制定的關鍵詞設定為高亮效果。

相關文章