效果

    <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,//替換輸入框的內(nèi)容
            `<span style="color:#005BC7;">${this.data.keycode}</span>`)//模板字符串使用span標(biāo)簽設(shè)置高亮顏色
        })
        this.setData({
          recommend: recommend//替換后的內(nèi)容賦值
        })

昨天做完這個(gè)發(fā)現(xiàn)高亮只會(huì)跟隨輸入的關(guān)鍵詞變化，而不會(huì)區(qū)分大小寫，于是找了一下別人的寫法，發(fā)現(xiàn)對rich-text標(biāo)簽的使用非常少，特此再用這個(gè)實(shí)現(xiàn)不區(qū)分大小寫高亮
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;
}

效果