实现查询到的结果关键字变红

最近在完成一个微信小程序项目中，需要进行模糊查询，就想让结果中的关键字变成醒目的红色。

方法如下：

首先，讲一下思路：
如果不设置这种效果，应该显示的是一个普通的字符串；
而要设置红色，唯一的方法是通过样式，也就是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;
}