javascript實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示代碼
更新時(shí)間：2014年04月03日 15:28:37 作者：
關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧，應(yīng)用也比較廣泛的，下面為大家介紹下通過(guò)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)稱(chēng)：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)文章
el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫(xiě)項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01
javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
這篇文章主要介紹了javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁(yè)面點(diǎn)擊加減按鈕數(shù)字的累加，需要的朋友可以參考下2014-09-09
JavaScript中實(shí)現(xiàn)map功能代碼分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)map功能代碼分享,本文直接給出實(shí)現(xiàn)代碼,給出一個(gè)MAP類(lèi),類(lèi)中包含大多數(shù)的常用方法,還可以自己擴(kuò)展,需要的朋友可以參考下2015-06-06
js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法
最近開(kāi)發(fā)中需要和后端進(jìn)日期和時(shí)間傳值,前后端約定為時(shí)間戳的格式,但是前端展示需要展示成年-月-日的格式,就需要進(jìn)行日期和時(shí)間轉(zhuǎn)換格式,這篇文章主要給大家介紹了關(guān)于js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法,需要的朋友可以參考下2024-06-06
uniapp開(kāi)發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法
這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項(xiàng)常見(jiàn)的操作,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了淺談js二維碼掃碼登錄是什么原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法
這篇文章主要介紹了JavaScript中防止微信瀏覽器被整體拖動(dòng)的方法,需要的朋友可以參考下2017-08-08
JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)代碼例子
在Web開(kāi)發(fā)中通過(guò)使用JavaScript可以動(dòng)態(tài)地修改HTML元素的屬性和樣式,下面這篇文章主要給大家介紹了關(guān)于JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式
這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
本節(jié)實(shí)例給出一個(gè)獲取瀏覽器當(dāng)前窗口大小的方法。當(dāng)瀏覽器窗口大小變化時(shí)，顯示的值會(huì)隨時(shí)變化2011-12-12