js keyword highlighting (keyword highlighting based on ID/tag) case introduction_javascript skills

Copy code The code is as follows: /* * Parameter description: * obj: object, to be highlighted Displayed html tag node. * hlWords: String, keyword words to be highlighted, use vertical bars (|) or spaces to separate multiple words. * bgColor: Background color, default is red. */ function MarkHighLight(obj, hlWords, bgColor) { hlWords = AnalyzeHighLightWords(hlWords); if (obj == null || hlWords.length == 0) return ; if (bgColor == null || bgColor == "") { bgColor = "red"; } MarkHighLightCore(obj, hlWords); //Perform highlighting Mark's core method function MarkHighLightCore(obj, keyWords) { var re = new RegExp(keyWords, "i"); var style = ' style="background-color:' bgColor ';" ' for (var i = 0; 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, " $1 "); if (childObj.data == objResult .childNodes[0].innerHTML) continue; obj.replaceChild(objResult, childObj); } else if (childObj.nodeType == 1) { MarkHighLightCore(childObj, keyWords); } } } //Analyze 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 result = result "|" resultArr[i]; } return result.replace(/(^|*)|(|*$)/g, ""); } else { return hlWords; } } //Use bubble sorting method to put long keywords in front function BubbleSort(arr) { var temp, exchange; for (var i = 0; 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"); } &lt ;/script> 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. Improved version Copy code The code is as follows: function highlightWord(node, word) { // Iterate into this nodes childNodes if (node.hasChildNodes) { var hi_cn; for (hi_cn = 0; 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 for (var j = 0; 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 for (var j = 0; j highlightWord(element, array[i]); } } }