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>
相关推荐
烈风逍遥13 分钟前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web23 分钟前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
2501_9160074727 分钟前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
前端探险家Rick32 分钟前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户9210802628636 分钟前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户9210802628636 分钟前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王36 分钟前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
kiros_wang38 分钟前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端
flash俊杰1 小时前
SQLite + sqlite-vec:100 篇文档内的私域知识库怎么做
前端