Uni app wechat applet search keywords are displayed in red

Search keywords are marked in red

Modify the style of some characters in the string ：

async getProductList() {
				uni.showLoading({
					title: ' Asking for ...'
				})
				let resPro = await getProducts({
					keyword: this.keyword,
					cate_id: this.currentCateId,
					id: this.pro
				})
                // Handle the label style in the returned data 
				if(Object.keys(resPro).length != 0) {
					resPro.forEach((item,index)=>{
						if(item.hasOwnProperty('withTags')) {
							item.withTags.forEach((subItem,idx)=> {
								if(subItem.product_tag.indexOf(this.keyword) != -1) {
									subItem.product_tag = this.join(subItem.product_tag,this.keyword)
								}
							})
						}
					});
				}
				
				this.productList = resPro
				console.log('getProductList',this.productList)
				uni.hideLoading()
			},
			//  Splicing 
			    join(str,key){
			      var reg = new RegExp((`(${key})`), "gm");
			      var replace = '<span style="color:#FD463E;font-weight:bold;">$1</span>';
			      return str.replace(reg, replace);
			    },

Show ：

<u-tag v-for="(vo,key) in item.withTags" :key="key" :text="vo.product_tag" :keyName="keyword"
	color="#414141" bgColor="#eaebeb" borderColor="#eaebeb" shape="circle" size="mini" type="warning">
</u-tag>

u-tag.vue

<!-- <text
					class="u-tag__text"
					:style="[textColor]"
					:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
				>{
   { text}} </text> -->
				<rich-text
					:nodes="text"
					class="u-tag__text"
					:style="[textColor]"
					:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
				> </rich-text>

In the original <text> Cannot display normally in . The label and style will be displayed or the content will not be displayed . stay ＜rich-text> Medium nodes It can be displayed normally