vue 选中的关键字高亮（单个字匹配 、多个字匹配）

我这里做的是聊天对话的高亮， 单个字匹配 和多个字匹配 不说废话直接上代码吧！

标签部分：一定 用v-html 渲染出来

多个字匹配 ：准备好关键词数组 以及对话的数组
先上效果图：

image.png

上代码 :

<template>
<div>
<div >
关键词数组:<span v-for="(item) in keywords" :key="item">{{ item }}、</span>




</div>
<div>
<div v-for="(item,index) in arr" :key="index">
<div >
<p>
<span>{{item.identity}}</span>:<span v-html="item.text"></span></p>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: '',
components: {},
data () {
return {
keywords: ['你', '再见', '哦', '好的', '没有', '嗯嗯'],
colors: ['#FFB5C5', '#EEC900', 'red', 'green', 'orange', 'red'],
arr: [
{
text: '嗨！好久不见你在干嘛呢！',
identity:"朋友"
},
{
text: '咦,你怎么在这里啊！',
identity:"我"
},
{
text: '我来这边逛逛，想不到遇见你了。',
identity:"朋友"
},
{
text: '哦，原来是这样啊，我也在这边逛逛',
identity:"我"
},
{
text: '我们还没有微信加一个吧！',
identity:"朋友"
},
{
text: '嗯嗯，加上了，那我们回头再见吧！',
identity:"朋友"
}
]
}
},
mounted () {
this.replaceArr(this.keywords)
},
methods: {
replaceArr (keywords) {
let arr = this.arr; //为什么要存这一步，就是不要随意直接操作data里面的值，之前的文章有讲到过。
keywords.forEach((keywordItem, keywordIndex) => {
// 匹配关键字正则
for (let index = 0; index < arr.length; index++) {
arr[index].text = arr[index].text.replace(keywordItem,<span style="color: red;">${keywordItem}</span>);
}
})
this.arr = arr;
}
}
}
</script>

单个字匹配：
先上效果图

image.png
代码如下：
<template>
<div>
<div >
关键字:<span>{{ keyword }}</span>




</div>
<div>
<div v-for="(item,index) in arr" :key="index">
<div >
<p>
<span>{{item.identity}}</span>:<span v-html="replaceArr(item.text,keyword)"></span></p>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: '',
components: {},
data () {
return {
keyword:'不',
colors: ['#FFB5C5', '#EEC900', 'red', 'green', 'orange', 'red'],
arr: [
{
text: '嗨！好久不见你在干嘛呢！',
identity:"朋友"
},
{
text: '咦,你怎么在这里啊！',
identity:"我"
},
{
text: '我来这边逛逛，想不到遇见你了。',
identity:"朋友"
},
{
text: '哦，原来是这样啊，我也在这边逛逛',
identity:"我"
},
{
text: '我们还没有微信加一个吧！',
identity:"朋友"
},
{
text: '嗯嗯，加上了，那我们回头再见吧！',
identity:"朋友"
}
]
}
},
methods: {
replaceArr (item ,keyword) {
let Reg = new RegExp(keyword)
if (item) {
let res = item.replace(Reg, <span style="color: red;">${keyword}</span>);
return res;
}
}
}
}
</script>

复制即用 ，小老乡不用谢我，哈哈哈哈哈！