[JQuery] 문자열 내 특정 검색 단어 하이라이터 효과주기

■ JQuery  문자열 내 특정 검색 단어 하이라이터 효과주기

문자열 또는 문장 내 검색한 단어에 하이라이터 효과 처리
ex. 크롬 ctrl+f 로 단어 검색 시 해당 단어가 있는 경우 하이라이트 처리되는 것과 동일

---

■ 예제

<style>
.txt-hlight {
	background: yellow;
}
</style>
 
<input type="text" id="search">
<div id="contents">this is a new keyword and keyword</div>
 
<script type="text/javascript">
$('#search').keyup(function () {
    var search = $('#search').val();
    $("#contents:contains('"+search+"')").each(function () {
        var regex = new RegExp(search,'gi');
        $(this).html( $(this).text().replace(regex, "<span class='txt-hlight'>"+search+"</span>") );
    });
});
</script>

---

■ 예제 결과

예제 결과