필요해서 만들려고 생각하다가 분명히 있을거야 라고 찾아보면 항상 있죠 ㅋㅋㅋㅋ 

최근에 검색한 결과 중에서 검색어를 하이라이트해서 보여주고 싶다는 생각이 들었고 찾아보니 mark.js 라는 라이브러리가 있더라고요.

사용도 간단하고 가볍고 해서 선택했습니다. 간단한 사용 예제 하나 가지고 왔어요. 

 

<!-- mark.js 추가하기 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js'></script>

<style>
.table_highlight{
  background-color: #f9ed69;
}
</style>

<script>
var keyword = 'test'
$('#aa_table').mark('test', {
  "element": "span",
  "className": "table_highlight"
});
</script>

....
<body>
  <table id='aa_table'></table> 
</body>

 

위와 같은 코드로 mark.js 를 간단하게 적용할 수 있습니다.
코드를 간단히 살펴보면 aa_table에 존재하는 test라는 글자를 test로 변경해줍니다.

따라서 test는 table_highlight css 적용을 받게 되고 배경이 노란색으로 표시되죠.

 

mark.js 홈페이지에 가보시면 더 많은 예제, 사용방법이 나와있습니다. 

mark.js 홈페이지 바로가기 : https://markjs.io/

+ Recent posts