<template>
  <div>
    <span
      :class="index % 2 !== 0 ? 'hightLight' : ''"
      v-for="(item, index) in textData"
      :key="index"
      >{{ item }}</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      textData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // let str = "实现搜索词高亮 - 百度文库";
      // let reg = /([高亮词文])/g;
      // let str = "高亮几个词语出来好不好";
      // let reg = /(高亮|词语)/g;
      let str = '1212高亮## 4455 ### 0011 ##44488## 哈高亮哈哈 ##'
      // let reg = /##\s+(.*?)\s+##/g
      let reg = /(高亮|词语)/g
      let result = {}
      let currentIndex = 0
      let returnData = []
      while ((result = reg.exec(str))) {
        returnData.push(str.slice(currentIndex, result.index))
        returnData.push(result[1])
        currentIndex = result.index + result[0].length
      }
      if (str.length > currentIndex) {
        returnData.push(str.slice(currentIndex, str.length))
      }
      console.log('returnData:', returnData)
      this.textData = returnData
    }
  }
}
</script>

<style>
.hightLight {
  color: red;
}
</style>