JS 정적 페이지 검색 및 하 이 라이트 디 스 플레이 기능 전체 예제 구현

본 고의 실례 는 JS 가 정적 페이지 검색 을 실현 하고 하 이 라이트 디 스 플레이 기능 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS  </title>
</head>
<body>
<input id="key-word" class="key-word" value="       " />
<button id="search-button">  </button>
<div id="content" >
<p>      ,     ,       ……,  1234abcd    </p>
<p>      ,     ,       ……,  1234abcd    </p>
<p>      ,     ,       ……,  1234abcd    </p>
<p>      ,     ,       ……,  1234abcd  < d d>  </p>
</div>
<script>
function $(id){
return document.getElementById(id)
}
var putWordsObj = $('key-word');
putWordsObj.onfocus = function(){
if(this.value == '       ')this.value='';
}
putWordsObj.onblur = function(){
if(!this.value)this.value='       ';
}
//search
$('search-button').onclick = function(){
var content = $('content').innerHTML;
var keyWord = $('key-word').value;
content = search_do(content, keyWord);
$('content').innerHTML = content;
//alert(content)
}
function search_do(content,keyWord){
var keyWordArr = keyWord.replace(/[\s]+/g,' ').split(' ');
var re;
for(var n = 0; n < keyWordArr.length; n ++) {
//re = new RegExp(">[\s\S]*?"+keyWordArr[n]+"[\s\S]*?<\S","gmi");
re = new RegExp(""+keyWordArr[n]+"","gmi");
content = content.replace(re,'<span style="color:#0f0;background-color:#ff0">'+keyWordArr[n]+'</span>');
}
return content;
}
</script>
</body>
</html>

실행 효 과 는 다음 과 같 습 니 다:

자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기