기존에 백앤드 단에서 처리하던 검색어 하이라이트 기능을 간단히 jQuery를 이용해서 처리할 수 있는 방법이 있어서 소개한다.

제작자는 Johann Burkard이며 웹사이트는 다음과 같다.
https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

style css에

.highlight { background-color: #원하는배경색; color: #원하는글자색 }

과 같이 셋업 해두고

$("#원하는노드).highlight('검색어');

와 같이 호출 해주면 해당 노드 하위에 있는 모든 검색어에 .highlight 스타일이 적용된다.

하이라이트를 제거하고 싶으면

$("#원하는노드).removeHighlight();

와 같이 호출 해주면 스타일이 제거된다.

사용하기에 따라 id, class, tag 등 원하는 범위에 모두 적용 가능하므로 응용하기에 따라 매우 유용한 플러그인이다.

$("#id').highlight('search_word');
$(".class').highlight('search_word');
$("tag').highlight('search_word');