uni-app 微信小程序搜索关键字标红显示

搜索关键字标红

修改字符串中部分字符的样式：

async getProductList() {
				uni.showLoading({
					title: '正在请求...'
				})
				let resPro = await getProducts({
					keyword: this.keyword,
					cate_id: this.currentCateId,
					id: this.pro
				})
                //处理返回数据中的标签样式
				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()
			},
			// 拼接
			    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);
			    },

显示：

<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>

在原来的<text>中无法正常显示。会把标签和样式都显示出来或不显示内容。在＜rich-text>中的nodes中可以正常显示