JavaScript로 키워드 하이라이팅 기능 구현_기본지식

하이라이팅 기능은 주로 페이지의 특정 영역에 있는 특정 텍스트를 강조하는 것, 즉 배경색을 강조하는 것을 말합니다. 일반적으로 이 기능은 검색결과 페이지에서 자주 사용됩니다.

다음은 자바스크립트로 구현된 모든 사람을 위한 솔루션입니다.

먼저 에 다음 자바스크립트 메소드를 소개합니다.

코드 복사 코드는 다음과 같습니다. // //---------함수 fHl(o, flag, rndColor, url) 시작------// 함수 fHl(o, 플래그, rndColor, url){ /// /// 페이지의 특정 단어를 강조 표시하려면 자바스크립트 HTML DOM을 사용하세요. | ~ ~ 여기에서 본문은 강조 표시된 본문 내부의 콘텐츠를 의미합니다. ~ fHl(document.body, '희망|슬픔', false, '/') ~ fHl(document.getElementById('at_main'), 'Alone | Floating | Long', true, 'search.asp?keyword='); ~ ~ . search.asp?keyword=는 키워드 에 추가된 링크 주소를 의미합니다. ~ 여기에 나중에 사용할 매개변수를 추가했습니다. 어떤 주소든 가능합니다. /// /// /// 강조할 객체 /// /// /// 문자열, 강조 표시할 단어 또는 여러 단어, 세로 막대(|)를 사용하여 여러 단어를 구분합니다. /// /// 부울 값, 텍스트 배경색과 텍스트 색상을 무작위로 표시할지 여부를 true로 설정하면 무작위로 표시됩니다. /// /// /// 우리야, Gao Liang의 말에 대한 링크를 추가하세요 /// var bgCor=fgCor='' If(rndColor){ bgCor=fRndCor(10, 20) fgCor=fRndCor(230, 255) } else { bgCor='#F0F' fgCor='검은색' } var re=new RegExp(flag, 'i') for(var i=0; i var o_=o.childNodes[i] var o_p=o_.parentNode If(o_.nodeType==1) { fHl(o_, 플래그, rndColor, url); } else if (o_.nodeType==3) { If(!(o_p.nodeName=='A')){ If(o_.data.search(re)==-1)계속 var temp=fEleA(o_.data, 플래그) o_p.replaceChild(temp, o_) ~ } } //------------------------------------------------ 기능 fEleA(텍스트, 플래그){ var style=' style="Background-color:' bgCor ';color:' fgCor ';" var o=document.createElement('span') var str='' var re=new RegExp('(' flag ')', 'gi') If(url){ str=text.replace(re, ' '$1"' style '>$1 '); //키워드에 링크를 추가하는 것입니다. 빨간색 $1은 위 링크 주소 뒤의 특정 매개변수를 나타냅니다. } else { str=text.replace(re, ' $1 ') // 링크가 추가되지 않은 경우 표시 } o.innerHTML=str; 반품 } //------------------------------------------------ 함수 fRndCor(아래, 위에){ If(arguments.length==1){ var over=under under=0 }else if(arguments.length==0){ var under=0 var over=255 } var r=fRandomBy(under, over).toString(16) r=padNum(r, r, 2) var g=fRandomBy(under, over).toString(16) g=padNum(g, g, 2) var b=fRandomBy(under, over).toString(16) b=padNum(b, b, 2) //defaultStatus=r ' ' g ' ' b '#' 반환 r g b 함수 fRandomBy(아래, 위){ 스위치(인수.길이){ 사례 1: returnparseInt(Math.random()*under 1); 사례 2: return parseInt(Math.random()*(over-under 1) under); 기본값: 0을 반환합니다. ~ } 함수 padNum(str, num, len){ var temp='' for(var i=0; i } } } //---------끝 함수 fHl(o, flag, rndColor, url)---------------// //]]>

하이라이트를 구현하기 위해 위의 fHl 메서드가 사용되었으며, 매개변수의 의미는 주석에 기록되어 있습니다. 그런 다음 페이지 끝에서 fHl 메소드를 호출하여 지정된 영역의 텍스트를 강조 표시합니다. 예:

코드 복사 코드는 다음과 같습니다. fHl(document.body, 'highlight'); // 페이지 본문 영역에 "강조 표시된" 텍스트의 배경색을 지정합니다

어때요, 아주 간단해요~