前端怎么实现搜索内容关键字标红
思路:我们可以利用js的正则表达式来匹配搜索的关键字,匹配的文字变红之后的文字在写入网页。
js正则表达式:
var re1 = /ABC\-001/; var re2 = new RegExp('ABC\\-001'); re1; // /ABC\-001/ re2; // /ABC\-001/
注意,如果使用第二种写法,因为字符串的转义问题,字符串的两个\\
实际上是一个\
。
js实现:
brightenKeyword(val, keyword) { const Reg = new RegExp(keyword, 'i'); let res = ''; if (val) { res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`); return res; } }
然后将返回的字符串写到对应元素中(vue):
<span v-html="brightenKeyword(text,searchKey)"></span>
其他前端实现异曲同工。
转载自:前端怎么实现搜索内容关键字标红