화면 데이터 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;
}