vue搜索结果关词键词高亮

原理是遍历需要高亮的内容，通过正则匹配替换需要高亮的词

HTML

<template>
  <div>
    <div>
      <input type="text" v-model="keyword">
      <button @click="search()">搜索</button>
      <p v-for="word in list" v-html="word.valueBright"></p>
    </div>
  </div>
</template>

JS

methods:{
      search() {
        this.list = [ //后台返回的数据
          {
            id: 1,
            value: 'lm'
          },
          {
            id: 2,
            value: 'LM'
          },
          {
            id: 3,
            value: 'xx'
          },
        ]
        const replaceReg = new RegExp(this.keyword, 'ig')
        const upperCase = /^[A-Z]+$/ //英文搜索时
        for (const i in this.list) {
          if (replaceReg.test(this.list[i].value)) {
            this.list[i].value.match(replaceReg).map(item => { //可能有多个和关键词一样
              if (upperCase.test(item)) { //不区分大小写：如果是大写的就转成大写的，如果搜索区分大小写就不用这个了
                this.list[i].valueBright = this.list[i].value.replace(replaceReg,
                  `<span style="color:#e5242b">${this.keyword.toUpperCase()}</span>`)
              } else {
                this.list[i].valueBright = this.list[i].value.replace(replaceReg,
                  `<span style="color:#e5242b">${this.keyword}</span>`)
              }
            })
          } else {
            this.list[i].valueBright = this.list[i].value
          }
        }
      }

}