하이라이팅 기능은 주로 페이지의 특정 영역에 있는 특정 텍스트를 강조하는 것, 즉 배경색을 강조하는 것을 말합니다. 일반적으로 이 기능은 검색결과 페이지에서 자주 사용됩니다. 다음은 자바스크립트로 구현된 모든 사람을 위한 솔루션입니다. 먼저 에 다음 자바스크립트 메소드를 소개합니다. 코드 복사 코드는 다음과 같습니다. <br> //<![CDATA[ <br /> //---------함수 fHl(o, flag, rndColor, url) 시작------// <br /> 함수 fHl(o, 플래그, rndColor, url){ <br /> /// <요약><br /> /// 페이지의 특정 단어를 강조 표시하려면 자바스크립트 HTML DOM을 사용하세요.<br /> | ~ <br /> ~ 여기에서 본문은 강조 표시된 본문 내부의 콘텐츠를 의미합니다. <br /> ~ fHl(document.body, '희망|슬픔', false, '/') <br /> ~ fHl(document.getElementById('at_main'), 'Alone | Floating | Long', true, 'search.asp?keyword='); ~ ~ . search.asp?keyword=는 키워드 <br />에 추가된 링크 주소를 의미합니다. ~ 여기에 나중에 사용할 매개변수를 추가했습니다. 어떤 주소든 가능합니다. <br /> /// </요약><br> /// <param name="o" type="Object"><br> /// 강조할 객체 <br> ///</param><br> /// <param name="flag" type="String"><br> /// 문자열, 강조 표시할 단어 또는 여러 단어, 세로 막대(|)를 사용하여 여러 단어를 구분합니다. <br> ///</param><br> /// <param name="rndColor" type="Boolean"><br> 부울 값, 텍스트 배경색과 텍스트 색상을 무작위로 표시할지 여부를 true로 설정하면 무작위로 표시됩니다. <br> /// </param><br> /// <param name="url" type="String"><br> /// 우리야, Gao Liang의 말에 대한 링크를 추가하세요 <br> /// <반환></반환><br> var bgCor=fgCor='' <br> If(rndColor){ <br> bgCor=fRndCor(10, 20) <br> fgCor=fRndCor(230, 255) <br> } else { <br> bgCor='#F0F' <br> fgCor='검은색' <br> } <br> var re=new RegExp(flag, 'i') <br> for(var i=0; i<o.childNodes.length; i ){ <br /> var o_=o.childNodes[i] <br /> var o_p=o_.parentNode <br /> If(o_.nodeType==1) { <br /> fHl(o_, 플래그, rndColor, url); } else if (o_.nodeType==3) { <br /> If(!(o_p.nodeName=='A')){ <br /> If(o_.data.search(re)==-1)계속 <br /> var temp=fEleA(o_.data, 플래그) <br /> o_p.replaceChild(temp, o_) <br /> ~ }<br /> } <br /> //------------------------------------------------ <br /> 기능 fEleA(텍스트, 플래그){ <br /> var style=' style="Background-color:' bgCor ';color:' fgCor ';" var o=document.createElement('span') <br /> var str='' <br /> var re=new RegExp('(' flag ')', 'gi') <br /> If(url){ <br /> str=text.replace(re, '<a href="' URL <br /> '$1"' style '>$1</a>'); //키워드에 링크를 추가하는 것입니다. 빨간색 $1은 위 링크 주소 뒤의 특정 매개변수를 나타냅니다. <br> } else { <br> str=text.replace(re, '<span ' style '>$1</span>') // 링크가 추가되지 않은 경우 <br> 표시 } <br> o.innerHTML=str; 반품 <br> } <br> //------------------------------------------------ <br> 함수 fRndCor(아래, 위에){ <br> If(arguments.length==1){ <br> var over=under <br> under=0 <br> }else if(arguments.length==0){ <br> var under=0 <br> var over=255 <br> } <br> var r=fRandomBy(under, over).toString(16) <br> r=padNum(r, r, 2) <br> var g=fRandomBy(under, over).toString(16) <br> g=padNum(g, g, 2) <br> var b=fRandomBy(under, over).toString(16) <br> b=padNum(b, b, 2) <br> //defaultStatus=r ' ' g ' ' b <br> '#' 반환 r g b <br> 함수 fRandomBy(아래, 위){ <br> 스위치(인수.길이){ <br> 사례 1: returnparseInt(Math.random()*under 1); 사례 2: return parseInt(Math.random()*(over-under 1) under); 기본값: 0을 반환합니다. <br> ~ }<br> 함수 padNum(str, num, len){ <br> var temp='' <br> for(var i=0; i<len i return temp="(temp"></len> } <br> } <br> }<br> //---------끝 함수 fHl(o, flag, rndColor, url)---------------// <br> //]]> <br> <br><br> </div>하이라이트를 구현하기 위해 위의 fHl 메서드가 사용되었으며, 매개변수의 의미는 주석에 기록되어 있습니다. <p>그런 다음 페이지 끝에서 fHl 메소드를 호출하여 지정된 영역의 텍스트를 강조 표시합니다. 예: </p> <p></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="77208" class="copybut" id="copybut77208" onclick="doCopy('code77208')"><u></u> 코드는 다음과 같습니다.</a></span></div> <script type="text/javascript"><div class="codebody" id="code77208"> fHl(document.body, 'highlight'); // 페이지 본문 영역에 "강조 표시된" 텍스트의 배경색을 지정합니다<br> <br> <br><br> </div>어때요, 아주 간단해요~
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
