uni-app 微信小程序搜索关键字后结果变色

jared.wang

于 2023-03-23 15:13:58 发布

阅读量573

点赞数 1

文章标签：微信小程序 uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45289067/article/details/129731286

版权

文章展示了如何在小程序的HTML代码中，利用JavaScript过滤器函数formatMc结合正则表达式动态匹配和高亮显示搜索关键字。当搜索值变化时，通过RegExp对象创建动态正则，然后用replace方法替换匹配到的关键字，用<font>标签包裹以改变颜色。这种方法在使用rich-text组件渲染时尤其有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看效果:

在这里插入图片描述
具体代码如下:
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>')
	}
},