JavaScript 搜尋關鍵字高亮效果

admin發表於2019-01-21
JavaScript

很多搜尋功能中，關鍵字在搜尋結果中，通常以高亮形式呈現。

下面就分享一段程式碼例項，它實現了類似功能，效果比較簡陋，希望從中獲取一些啟示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var odiv = document.getElementById("antzone");
  var otxt = document.getElementById("txt");
  var obt = document.getElementById("bt");
   
  obt.onclick = function () {
    var key = otxt.value;
    if (key == "") {
      alert("關鍵字不能夠為空");
      otxt.focus();
      return;
    }
    var str = odiv.innerHTML;
    var reg = new RegExp("(" + key + ")", "g");
    var newstr = str.replace(reg, "<font color=red>$1</font>");
    odiv.innerHTML = newstr;
  }
}
</script>
</head>
<body>
<div id="antzone">螞蟻部落歡迎您，本站的url地址是www.softwhy.com</div>
<input type="text" id="txt"/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現原理。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var odiv = document.getElementById("antzone")，獲取id屬性值為antzone的div元素。

（3）.var otxt = document.getElementById("txt"),獲取文字框元素物件。

（4）.var obt = document.getElementById("bt")，獲取按鈕元素物件。

（5）.obt.onclick = function () {}，為按鈕註冊click事件處理函式。

（6）.var key = otxt.value，獲取搜尋關鍵字。

（7）.if (key == "") {

  alert("關鍵字不能夠為空");

  otxt.focus();

  return;

}，判斷搜尋詞是不是空，如果為空彈出提示。

然後，文字框獲取焦點，並跳出函式。

（8）.var str = odiv.innerHTML，獲取div中的內容。

（9）.var reg = new RegExp("(" + key + ")", "g")，建立一個正規表示式物件。

（10）.var newstr = str.replace(reg, "<font color=red>$1</font>")，在關鍵字外邊包裹字型樣式設定。

（11）.odiv.innerHTML = newstr，在最終字串寫入div。

二.相關閱讀:

（1）.innerHTML參閱JavaScript innerHTML一章節。

（2）.RegExp()參閱正規表示式的建立一章節。

（3）.replace()參閱正規表示式replace()一章節。

相關文章