>웹 프론트엔드 >JS 튜토리얼 >js 키워드 하이라이팅(ID/태그 기반 키워드 하이라이팅) 사례 소개_javascript 기술

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 17:43:091477검색
코드 복사 코드는 다음과 같습니다.

환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<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") <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></script>





개선된 버전




코드 복사


코드는 다음과 같습니다.

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 ]);
}
}
}
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.