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>
相关推荐
美酒没故事°11 分钟前
纯css实现蜂窝效果
前端·javascript·css
lqj_本人14 分钟前
鸿蒙OS&UniApp 开发的下拉刷新与上拉加载列表#三方框架 #Uniapp
华为·uni-app·harmonyos
GISer_Jing32 分钟前
React useState 的同步/异步行为及设计原理解析
前端·javascript·react.js
mini榴莲炸弹35 分钟前
什么是SparkONYarn模式?
前端·javascript·ajax
能来帮帮蒟蒻吗35 分钟前
VUE3 -综合实践(Mock+Axios+ElementPlus)
前端·javascript·vue.js·笔记·学习·ajax·typescript
酷爱码40 分钟前
HTML5中的Microdata与历史记录管理详解
前端·html
开开心心就好1 小时前
高效全能PDF工具,支持OCR识别
java·前端·python·pdf·ocr·maven·jetty
啊啊啊~~1 小时前
歌词滚动效果
javascript·html
lqj_本人1 小时前
鸿蒙OS&UniApp 制作个人信息编辑界面与头像上传功能#三方框架 #Uniapp
uni-app·harmonyos
lqj_本人1 小时前
鸿蒙OS&UniApp 实现的二维码扫描与生成组件#三方框架 #Uniapp
uni-app