vue搜索关键字高亮

<template>
    <el-input
      class="fd-ipt"
      placeholder="请输入内容"
      v-model="inputValue"
      @keyup.enter.native="searchText">
    </el-input>
    <div class="container" v-for="(v, k, i) in htmlContent" :key="i">
        <h3 class="fd-title" v-html="v.title"></h3>
        <div class="fd-content" v-html="v.content"></div>
    </div>
</template>
<script>
    export default {
      data() {
        return {
          inputValue:'', 
          htmlContent:[{
              "title":"第一章",
              "content":"他是无意穿堂风，却偏偏孤据引山洪。"
              },{
              "title":"第二章",
              "content":"我记得我无数次点开对话框，却只"
              }]
          }
        },
  methods: {
    searchText() {  
        if (this.inputValue) {
        // 每次查询之前清空原数据中标签,防止再次查询时,查不到
        if (document.querySelectorAll('.highlight').length > 0) {
            this.htmlContent.forEach((item, index) => {
            this.$set(item, 'title', item.title.replace(/<[^<>]+>/g, ""))
            this.$set(item, 'content', item.content.replace(/<[^<>]+>/g, ""))
            })
        }
        const regExp = new RegExp(this.inputValue, 'g');
        this.htmlContent.forEach((item, index) => {
            // 采用$set方法  防止切换数据后,视图不更新
            this.$set(item, 'title', item.title.replace(regExp, `<span class="highlight">${this.inputValue}</span>`))
            this.$set(item, 'content', item.content.replace(regExp, `<span class="highlight">${this.inputValue}</span>`))
        })
        } 
    },
}};

</script>

<style>

.highlight {
  color: red;
}

</style>