vue输入框搜索匹配关键字显示高亮,字母大小写不改变

    <!-- 搜索建议列表 -->
    <div class="sugg-list" v-if="kw.length>0">
      <div
        class="sugg-item"
        v-for="(str, index) in keywordList"
        :key="index"
        v-html="lightFn(str, kw)"
        @click='addHistory(str)'
      ></div>
    </div>

html渲染

    // 匹配的关键字显示高亮
    lightFn (orgin, target) {
      // console.log(target)
      const res = new RegExp(target, 'ig')
      return orgin.replace(res, (item) => {
        // item是匹配里面的原字符
        return `<span style="color:red">${item}</span>`
      })
    },

利用正则和replace和匹配替换关键字显示高亮效果