示例:结果文字contentText
:“地震采集测试” ,关键字keyword
: “采集”
一、获取结果文字contentText
与关键字keyword
的共同值,即找到二者相同的字,存在一个数组wordsArray里,如下:
//获取需要标红的文字
getRedWords(contentText, keyword) {
let keywordArray = keyword.split('');
let wordsArray = [];
for(let key of keywordArray){
if(contentText.includes(key)){
wordsArray.push(key)
}
}
return wordsArray;
},
得到结果wordsArray:
二、使用正则表达式,为contentText依次替换每一个wordsArray里的文字(默认文字替换为带有红色格式),如下:
(此时RegExp(word, 'i')
是忽略大小写匹配,实测是匹配一次。如果想要多次匹配们可以使用RegExp(word, 'g')
全局匹配,详情请移步:正则表达式匹配 个人根据实际情况进行选择)
//将文字标红
brightenKeyword(contentText, keyword) {
let wordsArray = this.getRedWords(contentText, keyword);
let res = contentText;//res的初始值是不带任何红色格式的
//遍历相同字数组,
for(let word of wordsArray){
const Reg = new RegExp(word, 'i');
//替换每一个相同字
res = res.replace(Reg, `<span style="color: red;">${
word}</span>`);
}
return res;//此时的res里已经将需要标红的字体带上了格式(<span style="color:red"></span>)
},
三、调用brightenKeyword方法,拿到返回值,并使用标签展示该结果,如下:
<span v-html="brightenKeyword(record.productName,oldSearchText)"></span>
四、最终结果: