搜索关键字高亮显示

1.根据搜索框的关键词keyword生成一个用来替换的正则 ， new RegExp 全局 g 不区分大小写 i

2. replace('要替换的字符串/正则表达式','替换后的样子/回调函数')

3.富文本  v-html  {{}} 

方法

 formartStr (str) {
      const reg = new RegExp(this.keyword, 'ig')
      return str.replace(reg, (key) => {
        // key: 当前匹配到了哪个字符 key指的就是哪个字符
        // 'abcA' keyword='a'  key a A
        
        //返回一个字体样式为红色的  标签
        return `<span style="color:red;">${key}</span>`
      })
    }

 使用

<!-- 搜索联想列表区域 -->
    <div class="sugg-list">
        <div class="sugg-item" v-for="item in suggestList" :key="item">
          <span v-html="formartStr(item)"></span>
        </div>
    </div>