思路:我们可以利用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>
其他前端实现异曲同工。