用JS將搜索的關鍵字高亮顯示實現(xiàn)代碼

更新時間：2013年11月08日 16:54:46 作者：

這篇文章介紹了JS將搜索的關鍵字高亮顯示實現(xiàn)代碼，有需要的朋友可以參考一下

用JS讓文章內(nèi)容指定的關鍵字加亮

是這樣的..

現(xiàn)在有這些關鍵字:美容,生活,購物
當在文章里頭出現(xiàn)這些關鍵字,就把它加亮顯示..

文章是生成靜態(tài)頁面的,而這些關鍵字是能隨時更新的,所以我想用JS來實現(xiàn)...
不知道怎樣來實現(xiàn)這樣的功能啊?特此求助

<script language="JavaScript">
function highlight(key) {
 var key = key.split('|');
 for (var i=0; i<key.length; i++) {
  var rng = document.body.createTextRange();
  while (rng.findText(key[i]))
  //rng.pasteHTML(rng.text.fontcolor('red'));
  rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title="+ rng.text +">' + rng.text + '</a></div>');
 }
}
highlight('文章|關鍵|功能')
</script>

您可能感興趣的文章:

JS實現(xiàn)可控制的進度條
這篇文章主要為大家詳細介紹了JS實現(xiàn)可控制的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
typescript中正則表達式的常用使用方法
這篇文章主要給大家介紹了關于typescript中正則表達式的常用使用方法,TypeScript是一種靜態(tài)類型的JavaScript超集,它提供了對正則表達式的全面支持,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
IE6/IE7中JavaScript json提示缺少標識符、字符串或數(shù)字問題處理
這篇文章主要介紹了IE6/IE7中JavaScript json提示缺少標識符、字符串或數(shù)字問題處理,需要的朋友可以參考下
2014-12-12
Canvas放置反彈效果隨機圖形(實例)
下面小編就為大家?guī)硪黄狢anvas放置反彈效果隨機圖形(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
ES6 Promise對象概念及用法實例詳解
這篇文章主要介紹了ES6 Promise對象概念及用法,結(jié)合實例形式詳細分析了ES6中Promise對象的概念、原理、創(chuàng)建、使用方法及相關操作注意事項,需要的朋友可以參考下
2019-10-10
prototype框架中美元符號$用法分析
這篇文章主要介紹了prototype框架中美元符號$用法,結(jié)合實例形式較為詳細的分析了$符號的使用技巧與相關注意事項,需要的朋友可以參考下
2016-01-01
JavaScript變量聲明詳解
本文詳細向大家介紹了javascript變量聲明，并通過示例進行了具體分析，是篇非常不錯的文章，這里推薦給剛?cè)腴T的jser。
2014-11-11
js自定義事件及事件交互原理概述(二)
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助
2013-02-02
jquery刪除ID為sNews的tr元素的內(nèi)容
這篇文章主要介紹了刪除ID為sNews的索引為JQID的tr元素里的內(nèi)容,需要的朋友可以參考下
2014-04-04
?javascript數(shù)組中的slice方法和join??方法
這篇文章主要介紹了?javascript數(shù)組中的slice方法和join??方法，文章內(nèi)容介紹詳細，具有一的參考價值，需要的小伙伴可以參考一下，希望對你的學習有所幫助
2022-03-03