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>
相关推荐
xiangzhihong85 小时前
Visual Studio 2026 正式发布,带来 AI 原生 IDE 和提升性能
前端
安_5 小时前
为什么 Vue 要用 npm run dev 启动
前端·vue.js·npm
LYFlied5 小时前
【每日算法】LeetCode 437. 路径总和 III
前端·算法·leetcode·面试·职场和发展
六便士的理想5 小时前
el-table实现滑窗列
前端·vue.js
阿蓝灬5 小时前
Chrome Lighthouse优化
前端·chrome
枫子有风5 小时前
Day6 前端开发(from teacher;HTML,CSS,JavaScript,Web APIs,Node.js,Vue)
javascript·css
程序员爱钓鱼7 小时前
Node.js 编程实战:图像与文件上传下载
前端·后端·node.js
kong79069288 小时前
环境搭建-运行前端工程(vue)
前端·前端环境
谷歌开发者8 小时前
Web 开发指向标|开发者工具 AI 辅助功能的 5 大实践应用
前端·人工智能
晚烛14 小时前
实战前瞻:构建高可靠、强协同的 Flutter + OpenHarmony 智慧教育平台
javascript·flutter·html