<div class="codetitle"> <span><a style="CURSOR: pointer" data="87810" class="copybut" id="copybut87810" onclick="doCopy('code87810')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code87810"> <br><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/ 1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <br><title> ;JS keyword highlighting</title> <br><script type="text/javascript"> <br>/* <br>* Parameter description: <br>* obj: object, to be highlighted Displayed html tag node. <br>* hlWords: String, keyword words to be highlighted, use vertical bars (|) or spaces to separate multiple words. <br>* bgColor: Background color, default is red. <br>*/ <br>function MarkHighLight(obj, hlWords, bgColor) { <br>hlWords = AnalyzeHighLightWords(hlWords); <br>if (obj == null || hlWords.length == 0) <br>return ; <br>if (bgColor == null || bgColor == "") { <br>bgColor = "red"; <br>} <br>MarkHighLightCore(obj, hlWords); <br>//Perform highlighting Mark's core method <br>function MarkHighLightCore(obj, keyWords) { <br>var re = new RegExp(keyWords, "i"); <br>var style = ' style="background-color:' bgColor ';" ' <br>for (var i = 0; i < obj.childNodes.length; i ) { <BR>var childObj = obj.childNodes[i]; <BR>if (childObj.nodeType == 3) { <BR>if (childObj.data.search(re) == -1) continue; <BR>var reResult = new RegExp("(" keyWords ")", "gi"); <BR>var objResult = document.createElement ("span"); <BR>objResult.innerHTML = childObj.data.replace(reResult, "<span" style ">$1</span>"); <br>if (childObj.data == objResult .childNodes[0].innerHTML) continue; <br>obj.replaceChild(objResult, childObj); <br>} else if (childObj.nodeType == 1) { <br>MarkHighLightCore(childObj, keyWords); <br> } <br>} <br>} <br>//Analyze keywords<br>function AnalyzeHighLightWords(hlWords) { <br>if (hlWords == null) return ""; <br>hlWords = hlWords.replace(/ s /g, "|").replace(/| /g, "|"); <br>hlWords = hlWords.replace(/(^|*)|(|*$)/g, ""); <br>if (hlWords.length == 0) return ""; <br>var wordsArr = hlWords.split("|"); <br>if (wordsArr.length > 1) { <br>var resultArr = BubbleSort (wordsArr); <br>var result = ""; <br>for (var i = 0; i < resultArr.length; i ) { <BR>result = result "|" resultArr[i]; <BR> } <BR>return result.replace(/(^|*)|(|*$)/g, ""); <BR>} else { <BR>return hlWords; <BR>} <BR>} <BR>//Use bubble sorting method to put long keywords in front <BR>function BubbleSort(arr) { <BR>var temp, exchange; <BR>for (var i = 0; i < arr.length; i ) { <BR>exchange = false; <BR>for (var j = arr.length - 2; j >= i; j--) { <br>if ((arr[j 1].length) > (arr[j]).length) { <br>temp = arr[j 1]; arr[j 1] = arr[j]; arr[j] = temp; <br>exchange = true; <br>} <br>} <br>if (!exchange) break; <br>} <br>return arr; <br>} <br>} <br>//end <br>function search() { <br>var obj = document.getElementById("waiDiv"); <br>var keyWord = document.getElementById("keyWord"); <br>MarkHighLight(obj, keyWord.value, "Orange"); <br>} <br>< ;/script> <br></head> <br><body> <br><div id="waiDiv"> <br><input type="text" id="keyWord" /> ; <BR><input type="button" value="Search" onclick="search()" /><br /> <br><br /> <br><div id= "contentDiv"> <br>A second-rate friend was cheated out of 1,200 yuan while playing games. After calling the police, he was told that he couldn't file a case if he didn't have enough 2,000 yuan. The powerful second-hand person sent another 800 yuan to that account. Do you think the liar is happy? Still very happy. <br></div> <br></div> <br></body> <br></html> <br> </div> <br>Improved version<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="79524" class="copybut" id="copybut79524" onclick="doCopy('code79524')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code79524"> <br>function highlightWord(node, word) { <br>// Iterate into this nodes childNodes <br>if (node.hasChildNodes) { <br>var hi_cn; <br>for (hi_cn = 0; hi_cn < node.childNodes.length; hi_cn ) { <br>highlightWord(node.childNodes[hi_cn], word); <br>} <br>} <br>// And do this node itself <br>if (node.nodeType == 3) { // text node <br>tempNodeVal = node.nodeValue.toLowerCase(); <br>tempWordVal = word.toLowerCase(); <br>if (tempNodeVal.indexOf(tempWordVal) != -1) { <br>pn = node.parentNode; <br>if (pn.className != "highlight") { <br>// word has not already been highlighted! <br>nv = node.nodeValue; <br>ni = tempNodeVal.indexOf(tempWordVal); <br>// Create a load of replacement nodes <br>before = document.createTextNode(nv.substr(0, ni)); <br>docWordVal = nv.substr(ni, word.length); <br>after = document.createTextNode(nv.substr(ni word.length)); <br>hiwordtext = document.createTextNode(docWordVal); <br>hiword = document.createElement("span"); <br>hiword.className = "highlight"; <br>hiword.appendChild(hiwordtext); <br>pn.insertBefore(before, node); <br>pn.insertBefore(hiword, node); <br>pn.insertBefore(after, node); <br>pn.removeChild(node); <br>} <br>} <br>} <br>} <br>//根据Tag名高亮关键字 <br>function SearchHighlightTag(node, key) { <br>if (!document.createElement) return; <br>if (key.length === 0) return false; <br>var array = new Array(); <br>array = key.split(" "); <br>var element = document.getElementsByTagName(node); <br>for (var i = 0; i < array.length; i ) { <br>for (var j = 0; j < element.length; j ) { <br>highlightWord(element[j], array[i]); <br>} <br>} <br>} <br>//根据ID高亮关键字 <br>function SearchHighlightID(node, key) { <br>if (!document.createElement) return; <br>if (key.length === 0) return false; <br>var array = new Array(); <br>array = key.split(" "); <br>var element = document.getElementById(node); <br>for (var i = 0; i < array.length; i ) { <br>for (var j = 0; j < element.length; j ) { <br>highlightWord(element, array[i]); <br>} <br>} <br>} <br> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
