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>
相关推荐
叶落阁主1 小时前
Vue3 后台管理系统全局菜单搜索实战:Cmd/Ctrl + K、权限菜单与拼音过滤
前端·javascript·vue.js
卷帘依旧1 小时前
setState是同步的还是异步的
前端·面试
卷帘依旧1 小时前
讲一下useEffect和useLayoutEffect
前端·面试
wuhen_n1 小时前
AI Agent 入门:从零实现 LangChain 基础智能体
前端·langchain·ai编程
MacroZheng2 小时前
阿里Qoder + GLM-5.1,夯爆了!
前端·vue.js·人工智能
我是小胡胡2 小时前
彦火APP-Flutter包体分析
前端
木斯佳2 小时前
前端八股文面经大全:腾讯音乐-前端一面(2026-05-27)·面经深度解析
前端
糖果店的幽灵2 小时前
Claude Code 完全实战指南 - 第四章:Skill 怎么写
java·服务器·前端
light blue bird2 小时前
MES/ERP 工序 BOM 协同场景调度维护组件
前端·信息可视化·桌面端winform·多节点端·gdi图表绘制开发
鱼人2 小时前
Vue 3 组合式 API 最佳实践:如何写出可维护的代码
前端