模糊搜索联，关键字样式改变

     在搜索时，会给出联想词语，关键字上会变色的效果。正则匹配时，会无法大小写区分。

废话不说了，上代码。

<template>
  <div class="search-suggestion">
    <van-cell
      v-for="(item, index) in suggestions"
      :key="index"
      @click="$emit('search', item)"
      :title="item"
      icon="search"
    >
      <div slot="title" v-html="hingtLight(item)"></div>
    </van-cell>
  </div>
</template>

js部分：

hingtLight(text) {
      const lhightLightStr = `<span class="active">${this.searchText}</span>`;
      const reg = new RegExp(this.searchText, "gi");
      console.log(text);
      return text.replace(reg, lhightLightStr);
}

但此时有一个问题，原来大写的改成了小写。

优化

hingtLight(text) {
     
      const reg = new RegExp(this.searchText, "gi");
      // return text.replace(reg, lhightLightStr);
      //获取正则匹配的所有内容
      const res=text.match(reg)
      //根据正则分割字符串
      const strArr=text.split(reg)
      let strRes=''
      for(let i=0;i<res.length;i++){
        strRes+=strArr[i]+`<span class="active">${res[i]}</span>`

      }
      strRes+=strArr.pop()
      return strRes
}

最后查阅资料，有一种最简单的方法，在mdn官网查到的，在此主要是为了提醒各位，官方文档还是有惊喜的，可以翻看看。

    hingtLight(text) {
      let lhightLightStr = `<span class="active">$&</span>`;
      let reg = new RegExp(this.searchText, "gi");
      return text.replace(reg, lhightLightStr);
}