javascript實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼

2024-05-06 16:03:40

字體：大中小

供稿：網(wǎng)友

關(guān)鍵詞高亮想必大家對它都不陌生吧，應(yīng)用也比較廣泛的，下面為大家介紹下通過javascript是如何實現(xiàn)頁面內(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>
<p>百度（Nasdaq簡稱：BIDU）是全球最大的中文搜索引擎，2000年1月由李彥宏、徐勇兩人創(chuàng)立于北京中關(guān)村，致力于向人們提供“簡單，可依賴”的</p>
<p>信息獲取方式。“百度”二字源于中國宋朝詞人辛棄疾的《青玉案·元夕》詞句“眾里尋他千百度”，象征著百度對中文信息檢索技術(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, "http://$&") + ")", "ig");
temp = temp.replace(r, "<b>$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>