小程序关键词高亮

效果

     let recommend=res.data;
        recommend.map((item) =>{
          item.name = item.name.replace(this.data.keycode,//替换输入框的内容
            `${this.data.keycode}`)//模板字符串使用span标签设置高亮颜色
        })
        this.setData({
          recommend: recommend//替换后的内容赋值
        })

昨天做完这个发现高亮只会跟随输入的关键词变化，而不会区分大小写，于是找了一下别人的写法，发现对rich-text标签的使用非常少，特此再用这个实现不区分大小写高亮
item.name改成item

  recommend.map((item) => {
          arr.push(this.heightLight(item.name,that.data.keycode))
        })
        that.setData({
          "recommend": arr
        })
  heightLight: function (s, v) {
    var reg = new RegExp(v, "gi");//全局大小写不敏感匹配正则
    s= s.replace(reg, function (r) {
      return "
" + r + "
";
    })
    return s;
  },

加样式

.sou_item .p_color {
  color: #005BC7;
  display: inline;
}

效果