在vue中实现单个或者多个搜索词高亮

单个字段搜索高亮

<div class="" style="margin-left:10px">
    <input type="text" v-model="searchVal">
    <div >
      <div v-html="replaceval"></div>
      <div v-html="replaceval2"></div>
    </div>
  </div>

data () {
    return {
      val1: '1',
      val2: '2',
      searchVal: ''
    }
  },

  computed: {
    replaceval () {
      let val1 = JSON.parse(JSON.stringify(this.val1))
      const searchVal = this.searchVal
      // 匹配关键字正则
      const replaceReg = new RegExp(searchVal, 'g')
      // 高亮替换v-html值
      const replaceString = `${searchVal}`
      if (this.searchVal && this.searchVal.length > 0) {
      // 开始替换
        val1 = val1.replace(replaceReg, replaceString)
      }
      return val1
    },
    replaceval2 () {
      let val2 = this.val2
      const searchVal = this.searchVal
      	// 匹配关键字正则
        const replaceReg = new RegExp(searchVal, 'g')
        // 高亮替换v-html值
        const replaceString = '' + searchVal + ''
        val2 = val2.replace(replaceReg, replaceString)
      return val2
    }
  },

单个匹配字符串不实用，仅供展示

数组中的某个字段高亮（这个估计比较多的人会用到）

  <div class style="margin-left:10px">
    <input type="text" v-model="searchVal" />
    <div>
      <div v-for="(item,index) in replaceArr" :key="index">
        <div>
          名字：<span v-html="item.name"></span>
          年龄：<span v-html="item.age"></span>
        </div>
      </div>
    </div>
  </div>

 data () {
    return {
      searchVal: '',
      arr: [
        {
          name: 'a',
          age: '10'
        },
        {
          name: '20',
          age: '20'
        },
        {
          name: '30',
          age: '30'
        }
      ]
    }
  },

  computed: {
    replaceArr () {
      const arr = JSON.parse(JSON.stringify(this.arr))
      const searchVal = this.searchVal
      // 匹配关键字正则
      const replaceReg = new RegExp(searchVal, 'g')
      // 高亮替换v-html值
      const replaceString = `${searchVal}`
      for (let i = 0; i < arr.length; i++) {
        // 开始替换
        arr[i].age = arr[i].age.replace(replaceReg, replaceString)
      }
      return arr
    }
  },

多个关键词搜索高亮