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>
相关推荐
香蕉可乐荷包蛋几秒前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
格调UI成品12 分钟前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip23 分钟前
微前端框架选型
前端·javascript
芒果12534 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~44 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰1 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清1 小时前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu1 小时前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏1 小时前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾1 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端