vue多个关键字高亮

效果图

<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>