將搜尋關鍵詞高亮顯示例項程式碼

antzone發表於2017-03-15

搜尋詞高亮效果有著廣泛的應用，當前的所有搜尋引擎無不如此，很多網站的搜尋功能也具有此功能，非常的人性化，下面就通過例項程式碼介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
em{color:red}
</style>
<script type="text/javascript">
function XP_Highlight() 
{ 
  this.KeyWords=null; 
  // 格式化關鍵詞 
  this.formatKeyword=function(content,keyword) 
  { 
    keyword=keyword.replace(/(^\s*)|(\s*$)/g,""); 
    if(keyword=='')
    {
      return content;
    } 
    var reg=new RegExp('('+keyword+')','gi'); 
    return content.replace(reg,'<em>$1</em>'); 
  } 
  //重繪內容區域 
  this.refreshContent=function(contentID) 
  { 
    var content=document.getElementById(contentID).innerHTML; 
    for(var i=0;i<keywords.length;i++) 
    { 
      var key=keywords[i]; 
      content=this.formatKeyword(content,key); 
    } 
    document.getElementById(contentID).innerHTML=content; 
  } 
}
var keywords=["螞蟻部落","天氣不錯"]; 
window.onload=function()
{
  var hl=new XP_Highlight(); 
  hl.keywords=keywords;
  hl.refreshContent('res');
}
</script>
</head>
<body>
<div id="res">螞蟻部落歡迎你，只有努力才會有美好的未來，今天天氣不錯，要好好的珍惜</div>
</body>
</html>

以上程式碼實現了關鍵詞高亮效果，下面簡單介紹一下此效果的實現過程。

一.實現原理:

原理其實非常的簡單，就是通過正規表示式將指定的關鍵詞替換為指定的字串，這個字串是有特點的，外面套了一層標籤，這個有利於我們去通過這個標籤設定它的高亮顏色。最後將替換後的字串再寫入div即可。主要原理答題如此，這裡就不多介紹了，可以參閱程式碼註釋。

二.程式碼註釋:

1.function XP_Highlight(){},建立一個函式用來設定關鍵詞高亮效果，在本程式碼中用到了物件導向的思想，此函式就是一個類。

2.this.KeyWords=null;將KeyWords屬性值設定為null。

3.this.formatKeyword=function(content,keyword) {}，formatKeyword屬性值是指向一個函式的引用，此函式具有兩個引數，第一個引數是要求關鍵詞高亮的字串，第二個引數是要高亮的關鍵詞。

4.keyword=keyword.replace(/(^\s*)|(\s*$)/g,"")，將關鍵詞前後的空格都刪除。

5.if(keyword==''){return content;}，如果關鍵詞為空，直接返回字串。

6.var reg=new RegExp('('+keyword+')','gi')，建立一個正規表示式物件。

7.return content.replace(reg,'<em>$1</em>')，將字串中的關鍵字替換為指定的字串，這裡用到了正則中的引用，引用的內容恰好是關鍵詞本身，這樣字串的關鍵詞就被替換為關鍵詞本身外面再套上一個em標籤。

8.this.refreshContent=function(contentID){}，此函式用來遍歷關鍵詞然後呼叫formatKeyword函式執行替換操作。引數是存放字串容器的id。

9.var content=document.getElementById(contentID).innerHTML，將容器中的字串賦值給變數content。

10.for(var i=0;i<keywords.length;i++)遍歷每一個關鍵字。

11.var key=keywords;，賦值給key。

12.content=this.formatKeyword(content,key)，呼叫函式進行替換操作。

13.document.getElementById(contentID).innerHTML=content，將替換後的字串寫入div。

相關文章