效果
<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;
}
效果
