快捷導(dǎo)航

js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹

更新時間：2013年01月21日 09:09:54 作者：

關(guān)鍵詞高亮在開發(fā)中會帶來很多的方便，關(guān)鍵詞高亮包括:根據(jù)ID高亮關(guān)鍵字/根據(jù)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ù)說明: 
* obj: 對象, 要進(jìn)行高亮顯示的html標(biāo)簽節(jié)點. 
* hlWords: 字符串, 要進(jìn)行高亮的關(guān)鍵詞詞, 使用 豎杠(|)或空格分隔多個詞 . 
* 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; 
} 
} 
//利用冒泡排序法把長的關(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塊，報警后被告知不夠2000沒辦法立案。強大的二貨又往那個賬號寄了800塊。你說那騙子是開心呢？還是開心極了呢。 
</div> 
</div> 
</body> 
</html> 

改進(jìn)版

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

 
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]); 
} 
} 
} 