最近在完成一个微信小程序项目中,需要进行模糊查询,就想让结果中的关键字变成醒目的红色。
方法如下:
首先,讲一下思路:
如果不设置这种效果,应该显示的是一个普通的字符串;
而要设置红色,唯一的方法是通过样式,也就是css来设置,但是css必须是作用在一个节点上的;
所以,我们首先应该将字符串中要变红的部分单独出来成为一个节点;
而拆分的方法就只能是通过正则表达式来匹配了:
name:{
type:String,
value:'',
observer:function(newval,oldval,path){
let reg = new RegExp(`^(.*)(${this.properties.key})(.*)$`);
let names = reg.exec(newval);
this.setData({
name1:names[1],
name2:names[2],
name3:names[3]
})
}
},
我在接收到正常的参数后,利用正则表达式的分组将name分成了三个部分:name1,name2,name3;
其中,name2是要变红的部分。
然后,只需在渲染的时候将三部分拼成一部分即可。
<view class='name'>{{name1}}<text class='key'>{{name2}}</text>{{name3}}</view>
设置name2的样式:
.key{
color:red;
}