小程序关键词高亮

效果

    <view wx:for="{{recommend}}" class="sou_item">
      <rich-text nodes="{{item.name}}"></rich-text>
    </view>

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

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

 <view wx:for="{{recommend}}" class="sou_item" catchtap="search">
      <rich-text nodes="{{item}}"></rich-text>
    </view>

  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 "<p  class='p_color'>" + r + "</p>";
    })
    return s;
  },

加样式

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

效果