我這里做的是聊天對話的高亮， 單個字匹配 和多個字匹配 不說廢話直接上代碼吧挟纱！
標簽部分：一定 用v-html 渲染出來
多個字匹配 ：準備好關(guān)鍵詞數(shù)組 以及對話的數(shù)組
先上效果圖：
上代碼 :
<template>
<div>
<div >
關(guān)鍵詞數(shù)組:<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) => {
// 匹配關(guān)鍵字正則
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>
單個字匹配：
先上效果圖
代碼如下：
<template>
<div>
<div >
關(guān)鍵字:<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>
復(fù)制即用 ，小老鄉(xiāng)不用謝我擎值，哈哈哈哈哈慌烧！
