JS 关键词高亮
<!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 关键词高亮</title> <script type="text/javascript"> /* * 参数说明: * obj: 对象, 要进行高亮显示的html标签节点. * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 . * bgColor: 背景颜色，默认为红色. */ function MarkHighLight(obj, hlWords, bgColor) { hlWords = AnalyzeHighLightWords(hlWords); if (obj == null || hlWords.length == 0) return; if (bgColor == null || bgColor == "") { bgColor = "red"; } MarkHighLightCore(obj, hlWords); //执行高亮标记的核心方法 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); } } } //分析关键词 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; } } //利用冒泡排序法把长的关键词放前面 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>
改进版
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); } } }} //根据Tag名高亮关键字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]); } }}//根据ID高亮关键字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]); } }}