博客

首先看效果:

具体代码如下:

html代码

*[HTML]:  没有使用花括号渲染,所以需要 $options.filters 来找到过滤器
*[HTML]:  item.cpmc 为需要添加颜色的 段落内容
*[HTML]:  searchValue 为当前搜索框搜索的 关键字
<view class="lc-name" v-html="$options.filters.formatMc(item.cpmc, searchValue)"></view>

javascript代码:

// 由于 关键字val  是动态变化的所以需要 RegExp() 方法定义正则
filters: {
	formatMc(mc, val ) {
		let reg = RegExp(val,"g")
		console.log('format',reg, mc, val)
		return mc.replace(reg, '<font style="color: #D7001E;">' + val + '</font>')
	}
},

由于在小程序中是使用

rich-text

进行渲染的,所以在设置颜色的时候要使用


<font

标签来包裹才能使颜色生效