검색어 대소문자 구분없이 하이라이트

조민혜·2022년 9월 28일
0
post-thumbnail

화면 데이터 v-html로 바인드

<ul class="list__depth-2">
	<li v-for="(group, index) in selectedGroups" :key="index">
    	<div v-html="hightlight(group)" />
  	</li>
 </ul>

검색된 단어 찾아서 앞뒤 strong 테그 붙이기

 hightlight(value) {
   if (this.searchText) {
     const escapeTxt = escapeRegExp(this.searchText);
     var regExp = new RegExp(`(${escapeTxt})`, 'i');
     const res = value.replace(regExp, `<strong>$1</strong>`);
     return res;
   } else return value;
 },

strong 테그 스타일 입히기

::v-deep strong {
	color: #3e6bdf;
    font-weight: 500;
}
profile
Currently diving deeper into React.js development.

0개의 댓글