將搜尋關鍵字設定為高亮顯示例項程式碼

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"> 
strong{color:red} 
</style> 
<script type="text/javascript">
function createExp(arry)
{
  var str="";
  for(var i=0;i<arry.length;i++)
  {
    if(i!=arry.length-1)
    {
      str=str+arry[i]+"|";
    }
    else
    {
      str = str + arry[i];
    }
  }
  return "("+str+")";
}
function hightKey(key,id){
  var arr=null;
  var regStr=null;
  var content=null;
  var Reg=null;
  var newContent=null;
  var theObj=document.getElementById(id);
  arr=key.split(/\s+/);
  regStr=createExp(arr);
  content=theObj.innerHTML;
  Reg=new RegExp(regStr,"g");
  return newContent=content.replace(Reg,"<strong>$1</strong>");
}
window.onload=function(){
  var thediv=document.getElementById("thediv");
  var key="螞蟻部落  青島";
  thediv.innerHTML=hightKey(key,"thediv");
}
</script>
</head> 
<body> 
<div id="thediv">螞蟻部落歡迎您，只有努力非都才會有美好的未來，螞蟻部落位於青島市南區</div>
</body> 
</html>

以上程式碼實現了我們的要求，可以將指定的關鍵字在字串中以高亮的形式展現，下面簡單介紹一下實現過程。

一.實現原理:

原理很簡單，以上程式碼的最終目的就是實現用正規表示式匹配每一個關鍵字，然後用指定的字串替換匹配的關鍵字，然後利用CSS給其高亮或者加粗即可，原理大致如此，可以參閱相關閱讀，或者跟帖留言。

二.相關閱讀:

1.split()函式可以參閱javascript split()一章節。 

2.RegExp()建構函式可以參閱正規表示式 建立一章節。 

3.replace()函式可以參閱正規表示式 replace()一章節。

相關文章