效果图
<template>
<div class='text_box'>
<div
:class="{hightLight:index%2!==0}"
v-for="(item,index) in textData"
:key="index"
>
<span >{{item}}</span>
</div>
</div>
</template>
<script>
export default {
// 多个关键字高亮
data() {
return {
datas:"撒泼返回泡啊脚alohl/osdhjppjh嗯奥术大师多嗯啊啊奥术大师大叽啊发发叽喳喳",
arrs:[
{keyword:"啊啊"},
{keyword:"嗯"},
{keyword:"喳"},
],
};
},
created() {
this.init();
},
methods: {
init() {
let arrs = []
//根据关键字的数据格式改变for循环的内容
for(let key in this.arrs){
arrs.push(this.arrs[key].keyword)
}
// 根据arrs动态填写规则
let reg = new RegExp(`(${arrs.join('|')})`,'g')
let result = {};
let currentIndex = 0, returnData = [];
while ((result = reg.exec(this.datas))) {
returnData.push(this.datas.slice(currentIndex, result.index));
returnData.push(result[1]);
currentIndex = result.index + result[0].length;
}
if (this.datas.length > currentIndex) {
returnData.push(this.datas.slice(currentIndex, this.datas.length));
}
console.log(returnData);
this.textData = returnData;
}
}
};
</script>
<style>
.text_box{
display: flex;
align-items: start;
flex-wrap: wrap;
}
.hightLight {
color: red;
}
</style>