기존에 백앤드 단에서 처리하던 검색어 하이라이트 기능을 간단히 jQuery를 이용해서 처리할 수 있는 방법이 있어서 소개한다.
제작자는 Johann Burkard이며 웹사이트는 다음과 같다.
https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
style css에
1 | .highlight { background-color: #원하는배경색; color: #원하는글자색 } |
과 같이 셋업 해두고
1 | $("#원하는노드).highlight('검색어'); |
와 같이 호출 해주면 해당 노드 하위에 있는 모든 검색어에 .highlight 스타일이 적용된다.
하이라이트를 제거하고 싶으면
1 | $("#원하는노드).removeHighlight(); |
와 같이 호출 해주면 스타일이 제거된다.
사용하기에 따라 id, class, tag 등 원하는 범위에 모두 적용 가능하므로 응용하기에 따라 매우 유용한 플러그인이다.
1 2 3 | $("#id').highlight('search_word');$(".class').highlight('search_word');$("tag').highlight('search_word'); |