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

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

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

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

是這樣的..

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

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

復(fù)制代碼代碼如下:

<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('文章|關(guān)鍵|功能')
</script>

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)可控制的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可控制的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
typescript中正則表達(dá)式的常用使用方法
這篇文章主要給大家介紹了關(guān)于typescript中正則表達(dá)式的常用使用方法,TypeScript是一種靜態(tài)類型的JavaScript超集,它提供了對正則表達(dá)式的全面支持,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
IE6/IE7中JavaScript json提示缺少標(biāo)識符、字符串或數(shù)字問題處理
這篇文章主要介紹了IE6/IE7中JavaScript json提示缺少標(biāo)識符、字符串或數(shù)字問題處理,需要的朋友可以參考下
2014-12-12
Canvas放置反彈效果隨機(jī)圖形(實(shí)例)
下面小編就為大家?guī)硪黄狢anvas放置反彈效果隨機(jī)圖形(實(shí)例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
ES6 Promise對象概念及用法實(shí)例詳解
這篇文章主要介紹了ES6 Promise對象概念及用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Promise對象的概念、原理、創(chuàng)建、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-10-10
prototype框架中美元符號$用法分析
這篇文章主要介紹了prototype框架中美元符號$用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了$符號的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-01-01
JavaScript變量聲明詳解
本文詳細(xì)向大家介紹了javascript變量聲明，并通過示例進(jìn)行了具體分析，是篇非常不錯的文章，這里推薦給剛?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)容介紹詳細(xì)，具有一的參考價(jià)值，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助
2022-03-03