js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
<!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>JS 關(guān)鍵詞高亮</title>
<script type="text/javascript">
/*
* 參數(shù)說(shuō)明:
* obj: 對(duì)象, 要進(jìn)行高亮顯示的html標(biāo)簽節(jié)點(diǎn).
* hlWords: 字符串, 要進(jìn)行高亮的關(guān)鍵詞詞, 使用 豎杠(|)或空格分隔多個(gè)詞 .
* bgColor: 背景顏色,默認(rèn)為紅色.
*/
function MarkHighLight(obj, hlWords, bgColor) {
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0)
return;
if (bgColor == null || bgColor == "") {
bgColor = "red";
}
MarkHighLightCore(obj, hlWords);
//執(zhí)行高亮標(biāo)記的核心方法
function MarkHighLightCore(obj, keyWords) {
var re = new RegExp(keyWords, "i");
var style = ' style="background-color:' + bgColor + ';" '
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3) {
if (childObj.data.search(re) == -1) continue;
var reResult = new RegExp("(" + keyWords + ")", "gi");
var objResult = document.createElement("span");
objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
if (childObj.data == objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult, childObj);
} else if (childObj.nodeType == 1) {
MarkHighLightCore(childObj, keyWords);
}
}
}
//分析關(guān)鍵詞
function AnalyzeHighLightWords(hlWords) {
if (hlWords == null) return "";
hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");
if (wordsArr.length > 1) {
var resultArr = BubbleSort(wordsArr);
var result = "";
for (var i = 0; i < resultArr.length; i++) {
result = result + "|" + resultArr[i];
}
return result.replace(/(^\|*)|(\|*$)/g, "");
} else {
return hlWords;
}
}
//利用冒泡排序法把長(zhǎng)的關(guān)鍵詞放前面
function BubbleSort(arr) {
var temp, exchange;
for (var i = 0; i < arr.length; i++) {
exchange = false;
for (var j = arr.length - 2; j >= i; j--) {
if ((arr[j + 1].length) > (arr[j]).length) {
temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
exchange = true;
}
}
if (!exchange) break;
}
return arr;
}
}
//end
function search() {
var obj = document.getElementById("waiDiv");
var keyWord = document.getElementById("keyWord");
MarkHighLight(obj, keyWord.value, "Orange");
}
</script>
</head>
<body>
<div id="waiDiv">
<input type="text" id="keyWord" />
<input type="button" value="搜索" onclick="search()" /><br />
<br />
<div id="contentDiv">
二貨朋友玩游戲被騙1200塊,報(bào)警后被告知不夠2000沒(méi)辦法立案。強(qiáng)大的二貨又往那個(gè)賬號(hào)寄了800塊。你說(shuō)那騙子是開(kāi)心呢?還是開(kāi)心極了呢。
</div>
</div>
</body>
</html>
改進(jìn)版
function highlightWord(node, word) {
// Iterate into this nodes childNodes
if (node.hasChildNodes) {
var hi_cn;
for (hi_cn = 0; hi_cn < node.childNodes.length; hi_cn++) {
highlightWord(node.childNodes[hi_cn], word);
}
}
// And do this node itself
if (node.nodeType == 3) { // text node
tempNodeVal = node.nodeValue.toLowerCase();
tempWordVal = word.toLowerCase();
if (tempNodeVal.indexOf(tempWordVal) != -1) {
pn = node.parentNode;
if (pn.className != "highlight") {
// word has not already been highlighted!
nv = node.nodeValue;
ni = tempNodeVal.indexOf(tempWordVal);
// Create a load of replacement nodes
before = document.createTextNode(nv.substr(0, ni));
docWordVal = nv.substr(ni, word.length);
after = document.createTextNode(nv.substr(ni + word.length));
hiwordtext = document.createTextNode(docWordVal);
hiword = document.createElement("span");
hiword.className = "highlight";
hiword.appendChild(hiwordtext);
pn.insertBefore(before, node);
pn.insertBefore(hiword, node);
pn.insertBefore(after, node);
pn.removeChild(node);
}
}
}
}
//根據(jù)Tag名高亮關(guān)鍵字
function SearchHighlightTag(node, key) {
if (!document.createElement) return;
if (key.length === 0) return false;
var array = new Array();
array = key.split(" ");
var element = document.getElementsByTagName(node);
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < element.length; j++) {
highlightWord(element[j], array[i]);
}
}
}
//根據(jù)ID高亮關(guān)鍵字
function SearchHighlightID(node, key) {
if (!document.createElement) return;
if (key.length === 0) return false;
var array = new Array();
array = key.split(" ");
var element = document.getElementById(node);
for (var i = 0; i < array.length; i++) {
for (var j = 0; j < element.length; j++) {
highlightWord(element, array[i]);
}
}
}
相關(guān)文章
一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能
一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能...2007-04-04根據(jù)對(duì)象的某一屬性進(jìn)行排序的js代碼(如:name,age)
實(shí)例為按降序排列,若想改為升序只需把比較器中的value2-value1改為value1-value2就可以了2010-08-08JavaScript使用replace函數(shù)替換字符串的方法
這篇文章主要介紹了JavaScript使用replace函數(shù)替換字符串的方法,涉及javascript中replace函數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04給Flash加一個(gè)超鏈接(推薦使用透明層)兼容主流瀏覽器
給一個(gè)Flash加一個(gè)超鏈接,原想直接在object外直接套一個(gè)超鏈接即可,試了之后卻發(fā)現(xiàn)不是這么回事2013-06-06js實(shí)現(xiàn)的八點(diǎn)拖動(dòng)修改div大小的代碼
八點(diǎn)改變div大小的實(shí)現(xiàn)代碼,代碼相對(duì)來(lái)說(shuō)并不多,需要的朋友可以參考下。2010-02-02網(wǎng)頁(yè)從彈窗頁(yè)面單選框傳值至父頁(yè)面代碼分享
最近有項(xiàng)目需求,需要在加入新機(jī)構(gòu)的時(shí)候,需要選擇它的上級(jí)機(jī)構(gòu),下面把代碼整理,分享給大家,需要的朋友可以參考下2015-09-09JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門(mén)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門(mén)菜單效果代碼,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)變換頁(yè)面tab樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
js下通過(guò)XMLHttpRequest判斷IE6/IE7/FF的代碼,需要的朋友可以參考下。2011-02-02