uniapp 搜索内容关键字高亮

搜索出来的列表关键字高亮

首先循环搜索的字符串拿到所有的需要高亮的字符,再使用RegExp方法正则匹配所有相同字符,使用模板字符串给匹配到的字符加上高亮的样式,再使用replace方法将正则匹配到的字符替换为模板字符串处理后的高亮字符,返回处理后的数据,页面中用v-html渲染即可。

javascript 复制代码
if (this.name) {
	let str = this.name
	res.rows.forEach(item=>{
		for (var i = 0; i < str.length; i++) {
			let replaceReg = new RegExp(str[i], "ig");
			let replaceString =
				`<span style="color: #348BFF; font-weight: 700; font-size: 28rpx">${str[i]}</span>`;
			item.title = item.title.replace(replaceReg, replaceString);
		}
	})
}
javascript 复制代码
	<view v-html="item.title" class="publicTextFontSize font"></view>
相关推荐
C_心欲无痕12 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫12 小时前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo12 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
yinuo13 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
xkxnq13 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
烛阴13 小时前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
Van_Moonlight14 小时前
RN for OpenHarmony 实战 TodoList 项目:空状态占位图
javascript·开源·harmonyos
xkxnq14 小时前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
anyup15 小时前
2026第一站:分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos
BBBBBAAAAAi15 小时前
Claude Code安装记录
开发语言·前端·javascript