js 키워드 하이라이팅(ID/태그 기반 키워드 하이라이팅) 사례 소개

코드 복사 코드는 다음과 같습니다. /* * 매개변수 설명: * 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) //Mark의 핵심 메소드 강조 수행 MarkHighLightCore(obj, keyWords) { var re = new RegExp(keyWords, "i") var style = ' style="Background-color:' bgColor ';" = 0; i var childObj = obj.childNodes[i] if (childObj.nodeType == 3) { if (childObj.data. 검색(re) == -1) 계속; 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) 계속; obj.replaceChild(objResult, childObj); } else if (childObj.nodeType == 1) { MarkHighLightCore(childObj, keyWords) } } //키워드 분석 function AnalyzeHighLightWords(hlWords) { if (hlWords == null) return ""; hlWords = hlWords.replace(/ s /g, "|"). replacement(/| /g, "|"); hlWords = hlWords.replace(/(^|*)|(|*$)/g, "")if (hlWords.length == 0) return ""; var wordArr = hlWords.split("|"); if (wordsArr.length > 1) { var resultArr = BubbleSort (wordsArr); = ""; for (var i = 0; i result = result "|" resultArr[i] } return result.replace( /(^|*)|(|*$)/g, ""); } else { return hlWords; } } //버블 정렬 방법을 사용하여 앞에 긴 키워드 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] = 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> ; 두 번째- 레이트 친구는 게임을 하다가 1,200위안을 사기당했습니다. 경찰에 신고한 결과 2,000위안이 부족하면 소송을 제기할 수 없다는 말을 들었습니다. 그 유력 중고업자는 그 계좌로 800위안을 더 보냈습니다. 거짓말쟁이가 행복하다고 생각하시나요? 여전히 매우 행복합니다. 개선된 버전 코드 복사 코드는 다음과 같습니다. function 하이라이트Word(node, word) { // 이 노드로 반복 childNodes if (node.hasChildNodes) { var hi_cn; for (hi_cn = 0; hi_cn highlightWord(node.childNodes[hi_cn], word); } } // 이 노드 자체를 수행합니다. if (node.nodeType == 3) { // 텍스트 노드 tempNodeVal = node.nodeValue.toLowerCase(); tempWordVal = word.toLowerCase(); if (tempNodeVal.indexOf(tempWordVal) != -1) { pn = node.parentNode; if (pn.className != "highlight") { // 단어가 아직 강조표시되지 않았습니다! nv = node.nodeValue; ni = tempNodeVal.indexOf(tempWordVal); // 대체 노드 로드 생성 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 = "강조표시"; hiword.appendChild(hiwordtext); pn.insertBefore(이전, 노드); pn.insertBefore(hiword, node); pn.insertBefore(이후, 노드); pn.removeChild(노드); } } } } //根据Tag명 高亮关键字 function SearchHighlightTag(node, key) { if (!document.createElement) return ; if (key.length === 0) false를 반환합니다. var array = new Array(); 배열 = key.split(" "); var 요소 = document.getElementsByTagName(노드); for (var i = 0; i for (var j = 0; j highlightWord(element[j], 배열[i]); } } } //根据ID高亮关键字 function SearchHighlightID(node, key) { if (!document.createElement) return; if (key.length === 0) false를 반환합니다. var array = new Array(); 배열 = key.split(" "); var 요소 = document.getElementById(node); for (var i = 0; i for (var j = 0; j highlightWord(요소, array[i ]); } } }

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

js 키워드 하이라이팅(ID/태그 기반 키워드 하이라이팅) 사례 소개_javascript 기술