需求:在搜索框输入关键字,点击搜索查找内容,在正文中匹配搜索关键字的内容高亮显示
使用 new RegEXP 实现
matchKeyword (searchKeyword, value) { // searchKeyword搜索关键字, value正文内容
if (value) {
value = value + '' //转化为字符串类型
} else {
return
}
if (searchKeyword && searchKeyword.length > 0) {
let searchKeywords = searchKeyword.split(' ');
for (let i = 0; i < searchKeywords.length; i++) {
if (searchKeywords[i] !== '') { //排除掉空字符串,开始没有考虑空值、空格情况,导致
//全文都被匹配
let replaceReg = new RegExp(searchKeywords[i], 'gi');
let replaceString = '<span style="background-color:#ffc600;color: #000 ">' + searchKeywords[i] + '</span>';
value = value.replace(replaceReg, replaceString);
}
}
return value //返回替换后加上高亮样式的正文内容
} else {
return value;
}
}
<p v-html="matchKeyword(key,value)"></p>
用v-html 去解析返回的内容,这样样式(html标签)才会被解析
注意:一定要考虑 searchKeywords[i] 为空,导致 replaceReg 值为空的情况 ,当 replaceReg为空时,它与全文都能匹配,最后的结果是全文均能被匹配上,加上高亮样式。
解决:1.关键字符串包含多个用空格隔开的字符串,把关键字分隔成数组时,同时去除多余字符串
2.字符串分隔成数组之后,判断如果为空数组则不进行匹配操作(如上文)