javascript實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示代碼
更新時(shí)間：2014年04月03日 15:28:37 作者：
關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧，應(yīng)用也比較廣泛的，下面為大家介紹下通過javascript是如何實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>關(guān)鍵字高亮顯示</title>
</head>
<body>
<div class="result" id="textbox">
<p>百度（Nasdaq簡(jiǎn)稱：BIDU）是全球最大的中文搜索引擎，2000年1月由李彥宏、徐勇兩人創(chuàng)立于北京中關(guān)村，致力于向人們提供“簡(jiǎn)單，可依賴”的</p>
<p>信息獲取方式?！鞍俣取倍衷从谥袊?guó)宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”，象征著百度對(duì)中文信息檢索技術(shù)的執(zhí)著追求。</p>
</div>
<script>
function highlight(idVal, keyword) {
var textbox = document.getElementById(idVal);
if ("" == keyword) return;
//獲取所有文字內(nèi)容
var temp = textbox.innerHTML;
console.log(temp);
var htmlReg = new RegExp("\<.*?\>", "i");
var arr = new Array();
//替換HTML標(biāo)簽
for (var i = 0; true; i++) {
//匹配html標(biāo)簽
var tag = htmlReg.exec(temp);
if (tag) {
arr[i] = tag;
} else {
break;
}
temp = temp.replace(tag, "{[(" + i + ")]}");
}
// 講關(guān)鍵詞拆分并入數(shù)組
words = decodeURIComponent(keyword.replace(/\,/g, ' ')).split(/\s+/);
//替換關(guān)鍵字
for (w = 0; w < words.length; w++) {
// 匹配關(guān)鍵詞，保留關(guān)鍵詞中可以出現(xiàn)的特殊字符
var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
}
//恢復(fù)HTML標(biāo)簽
for (var i = 0; i < arr.length; i++) {
temp = temp.replace("{[(" + i + ")]}", arr[i]);
}
textbox.innerHTML = temp;
}
highlight("textbox","百度,李彥宏");
</script>
</body>
</html>
相關(guān)文章
es6中class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法的理解與應(yīng)用分析
這篇文章主要介紹了es6中class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
微信小程序?qū)崿F(xiàn)錄制、試聽、上傳音頻功能（帶波形圖）
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錄制、試聽、上傳音頻功能（帶波形圖）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
JavaScript截取字符串的2個(gè)函數(shù)介紹
這篇文章主要介紹了JavaScript截取字符串的2個(gè)函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實(shí)例講解了它們的用法,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JS ES6展開運(yùn)算符的幾個(gè)妙用，想了解ES6的同學(xué)，可以參考下2021-04-04
100個(gè)不能錯(cuò)過的實(shí)用JS自定義函數(shù)
本文收集了100個(gè)原生態(tài)JavaScript編寫的常用、實(shí)用自定義函數(shù),需要的朋友可以參考下2014-03-03
在做一個(gè)客戶端基建項(xiàng)目的時(shí)候，多處需要用到JS調(diào)取命令行執(zhí)行shell腳本，本文主要介紹了js執(zhí)行shell命令的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript原型繼承_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript原型繼承的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的，那么二者有哪些區(qū)別呢，本文就來和大家進(jìn)行簡(jiǎn)單的討論，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05
這篇文章主要介紹了微信小程序防止重復(fù)點(diǎn)擊按鈕的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10