<div class="codetitle"> <span><a style="CURSOR: pointer" data="87810" class="copybut" id="copybut87810" onclick="doCopy('code87810')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code87810"> <br><!DOCTYPE HTML PUBLIC "-//W3C/ /DTD XHTML 1.0 전환//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 키워드 강조</title> <br><script type="text/javascript"> <br>/* <br>* 매개변수 설명: <br>* obj: 강조 표시할 개체 html 태그 노드. <br>* hlWords: 강조할 키워드 단어. 여러 단어를 구분하려면 세로 막대(|) 또는 공백을 사용하세요. <br>* bgColor: 배경색, 기본값은 빨간색입니다. 🎜>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>//Mark의 핵심 메소드 강조 수행 <br> MarkHighLightCore(obj, keyWords) { <br>var re = new RegExp(keyWords, "i") <br>var style = ' style="Background-color:' bgColor ';" = 0; i < obj.childNodes.length; i ) { <BR>var childObj = obj.childNodes[i] <BR>if (childObj.nodeType == 3) { <BR>if (childObj.data. 검색(re) == -1) 계속; <BR>var reResult = new RegExp("(" keyWords ")", "gi") <BR>var objResult = document.createElement ("span"); >objResult.innerHTML = childObj.data.replace(reResult, "<span" 스타일 ">$1</span>") <br>if (childObj.data == objResult .childNodes[0].innerHTML) 계속; <br>obj.replaceChild(objResult, childObj); <br>} else if (childObj.nodeType == 1) { <br>MarkHighLightCore(childObj, keyWords) <br> } <br> } <br>//키워드 분석<br>function AnalyzeHighLightWords(hlWords) { <br>if (hlWords == null) return ""; <br>hlWords = hlWords.replace(/ s /g, "|"). replacement(/| /g, "|"); <br>hlWords = hlWords.replace(/(^|*)|(|*$)/g, "")if (hlWords.length == 0) return ""; <br>var wordArr = hlWords.split("|"); <br>if (wordsArr.length > 1) { <br>var resultArr = BubbleSort (wordsArr); = ""; <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>//버블 정렬 방법을 사용하여 앞에 긴 키워드 <BR>function BubbleSort(arr) { <BR>var temp, exchange <BR>for (var i = 0; i < arr.length; i ) { <BR>exchange = false; >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] = temp; <br>exchange = true <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>< ;/script> ; <br><body> <br><div id="waiDiv"> <br><input type="text" id="keyWord" /> <BR><input type="버튼 " value="Search" onclick="search()" /><br /> <br><br /> <br><div id= "contentDiv"> <br>두 번째- 레이트 친구는 게임을 하다가 1,200위안을 사기당했습니다. 경찰에 신고한 결과 2,000위안이 부족하면 소송을 제기할 수 없다는 말을 들었습니다. 그 유력 중고업자는 그 계좌로 800위안을 더 보냈습니다. 거짓말쟁이가 행복하다고 생각하시나요? 여전히 매우 행복합니다. <br></div> <br></div> <br></html> <br><br> <br>개선된 버전<br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><div class="codebody" id="code79524"> <br>function 하이라이트Word(node, word) { <br>// 이 노드로 반복 childNodes <br>if (node.hasChildNodes) { <br>var hi_cn; <br>for (hi_cn = 0; hi_cn highlightWord(node.childNodes[hi_cn], word); <br>} <br>} <br>// 이 노드 자체를 수행합니다. <br>if (node.nodeType == 3) { // 텍스트 노드 <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>// 단어가 아직 강조표시되지 않았습니다! <br>nv = node.nodeValue; <br>ni = tempNodeVal.indexOf(tempWordVal); <br>// 대체 노드 로드 생성 <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 = "강조표시"; <br>hiword.appendChild(hiwordtext); <br>pn.insertBefore(이전, 노드); <br>pn.insertBefore(hiword, node); <br>pn.insertBefore(이후, 노드); <br>pn.removeChild(노드); <br>} <br>} <br>} <br>} <br>//根据Tag명 高亮关键字 <br>function SearchHighlightTag(node, key) { <br>if (!document.createElement) return ; <br>if (key.length === 0) false를 반환합니다. <br>var array = new Array(); <br>배열 = key.split(" "); <br>var 요소 = document.getElementsByTagName(노드); <br>for (var i = 0; i < array.length; i ) { <br>for (var j = 0; j < element.length; j ) { <br>highlightWord(element[j], 배열[i]); <br>} <br>} <br>} <br>//根据ID高亮关键字 <br>function SearchHighlightID(node, key) { <br>if (!document.createElement) return; <br>if (key.length === 0) false를 반환합니다. <br>var array = new Array(); <br>배열 = key.split(" "); <br>var 요소 = document.getElementById(node); <br>for (var i = 0; i < array.length; i ) { <br>for (var j = 0; j < element.length; j ) { <br>highlightWord(요소, array[i ]); <br>} <br>} <br>} <br> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
