uniapp 搜索内容关键字高亮

搜索出来的列表关键字高亮

首先循环搜索的字符串拿到所有的需要高亮的字符,再使用RegExp方法正则匹配所有相同字符,使用模板字符串给匹配到的字符加上高亮的样式,再使用replace方法将正则匹配到的字符替换为模板字符串处理后的高亮字符,返回处理后的数据,页面中用v-html渲染即可。

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);
		}
	})
}
	<view v-html="item.title" class="publicTextFontSize font"></view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/568142.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32H750时钟频率和功耗以及RTC功能测试

STM32H750时钟频率和功耗和RTC功能测试 &#x1f4cc;相关篇《STM32H750片外QSPI启动配置简要》 ✨在使用STM32CubeMX修改STM32H750时钟树参数时&#xff0c;如果使用软件自动求解&#xff0c;这是一个非常耗时的操作&#xff0c;有时候还不一定成功&#xff0c;还是推荐使用手…

2024成都直播电商硝烟再起,天府锋巢AI 时代拉开帷幕

在今年1月份的“AI重构电商”生态大会上&#xff0c;百度借力AI数字人直播和文心大模型能力杀入电商场内&#xff0c;强调“AI重塑电商”。成都兴隆湖畔&#xff0c;天府锋巢直播产业基地计划开展高质量、低成本、互动性更强的虚拟数字人直播&#xff0c;为直播行业注入新的活力…

低代码技术与仓储管理的新纪元:革命性的供应链变革

引言 在当今数字化时代&#xff0c;企业对于创新和效率的追求越发迫切。在这样的背景下&#xff0c;低代码技术应运而生&#xff0c;成为企业数字化转型的重要工具之一。低代码技术的崛起为企业提供了一种快速、灵活、成本效益高的开发方式&#xff0c;大大缩短了软件开发周期…

2024五一劳动节市集露营生活节活动策划方案

2024五一劳动节市集露营生活节&#xff08;向野而生 躺平生活节主题&#xff09;活动策划方案 方案页码&#xff1a;72页 文件格式&#xff1a;pptx 方案简介&#xff1a; 五一躺平生活节 咖啡一饮&#xff0c;书本一翻&#xff0c;轻松又自在,看着窗外的阳光&#xff0c;…

4.23日总结(项目总结)

1.项目&#xff1a; 今日项目通过一个在登录界面的一个静态变量&#xff0c;完成了区分老师和学生&#xff0c;能够分开老师和学生&#xff0c;并且不同身份的人进去会有不同的显示&#xff0c;以及登录链接主界面&#xff0c;还有学生和老师的不同的表&#xff0c;其次就是创…

「51媒体」新闻媒体邀约如何进行媒体宣传(方法)

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 新闻媒体邀约进行媒体宣传是一个策略性的过程&#xff0c;旨在吸引媒体的注意力并促使其对特定事件、产品发布或企业活动进行报道。以下是一些关键步骤和策略&#xff1a; 制定媒体传播方…

rust 学习笔记(13-19)

13 迭代器与闭包 Rust 的设计灵感来源于很多现存的语言和技术。其中一个显著的影响就是 函数式编程&#xff08;functional programming&#xff09;。函数式编程风格通常包含将函数作为参数值或其他函数的返回值、将函数赋值给变量以供之后执行等等。 闭包&#xff08;Closu…

网络爬虫快速入门及爬取百度搜索结果(附源码)

前言 爬虫的基本结构及工作流程 1. 确定目标 首先&#xff0c;确定你想要爬取的目标&#xff0c;包括目标网站或网页、需要提取的数据类型&#xff08;如文本、图片、视频等&#xff09;以及爬取的深度&#xff08;单页、整个网站等&#xff09;。 2. 获取网页内容 使用HT…

刷题之Leetcode242题(超级详细)

242.有效的字母异位词 力扣题目链接(opens new window)https://leetcode.cn/problems/valid-anagram/ 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 示例 1: 输入: s "anagram", t "nagaram" 输出: true 示例 2…

基于51单片机的数码管显示的proteus仿真

文章目录 一、数码管二、单个数码管显示0~F仿真图仿真程序 三、数码管静态显示74HC138译码器74HC245缓冲器仿真图仿真程序 四、数码管动态显示仿真图仿真程序 三、总结 一、数码管 数码管&#xff0c;也称作辉光管&#xff0c;是一种可以显示数字和其他信息的电子设备。它的基…

Abaqus2024 安装教程(附免费安装包资源)

鼠标右击软件压缩包&#xff0c;选择“解压到Abaqus2024”。 鼠标右击“此电脑”&#xff0c;选择“属性”。 点击“高级系统设置”。 点击“环境变量”。 点击“新建”。 变量名输入&#xff1a;NOLICENSECHECK 变量值输入&#xff1a;true 然后点击“确定”。 点击“确定”。…

SD-WAN多分支组网案例分享

随着企业规模持续扩大&#xff0c;业务版图日益多元&#xff0c;多分支组网已成为企业网络建设的核心议题。如何构建高效、安全且灵活的网络连接&#xff0c;成为企业急需解决的关键问题。近些年&#xff0c;SD-WAN技术的崭露头角&#xff0c;为企业带来了前所未有的解决方案。…

芯片数字后端设计入门书单推荐(可下载)

数字后端设计&#xff0c;作为数字集成电路设计的关键环节&#xff0c;承担着将逻辑设计转化为物理实现的重任。它不仅要求设计师具备深厚的电路理论知识&#xff0c;还需要对EDA工具有深入的理解和熟练的操作技能。尽管数字后端工作不像前端设计那样频繁涉及代码编写&#xff…

PLC无线通讯技术在汽车喷涂车间机械手臂上的应用

一、项目背景 在汽车生产装配工艺中&#xff0c;机械臂目前已经广泛地应用于装配、搬运等工业生产中&#xff0c;在机械臂系列产品中&#xff0c;汽车喷漆自动控制喷涂机械装置以其独特的优势&#xff0c;能够根据油漆喷涂量的大小&#xff0c;严格控制喷嘴与喷漆面之间距离等…

【数据库】聊聊普通索引和唯一索引怎么选

业务场景 在实际的业务中&#xff0c;一般都有用户信息表&#xff0c;而存储的数据包括(姓名、手机号、身份证号)&#xff0c;对于业务层面来说一个人的身份证号是唯一确定的&#xff0c;所以在创建表的时候&#xff0c;针对身份证号列就可以选择创建普通索引或唯一索引。那么…

Git 创建版本库

Git 创建版本库 | CoderMast编程桅杆Git 创建版本库 在 Git 上创建版本库有两种方式&#xff0c;一种是直接拷贝远程 Git 仓库到本地&#xff0c;另外一种是我们自己创建本地的版本库。 拷贝远程仓库 拷贝远程仓库时我们需要知道远程仓库的URL地址&#xff0c;直接使用如下命令…

手撕netty源码(一)- NioEventLoopGroup

文章目录 前言一、NIO 与 netty二、NioEventLoopGroup 对象的创建过程2.1 创建流程图 前言 本文是手撕netty源码系列的开篇文章&#xff0c;会先介绍一下netty对NIO关键代码的封装位置&#xff0c;主要介绍 NioEventLoopGroup 对象的创建过程&#xff0c;看看new一个对象可以做…

使用mapinfo软件的在线地图插件运行错误解决

使用mapinfo软件的在线地图插件运行错误解决 一、如何解决win10/win11家庭版运行MapInfo中的在线地图插件报错【unexpected error&#xff1b;quitting】问题&#xff1f;二、如何解决在线地图切换地图源时的报错问题&#xff1f; 一、如何解决win10/win11家庭版运行MapInfo中的…

Linux中进程和计划任务管理(2)

一.进程命令 1.lsof lsof 命令&#xff0c;“list opened files”的缩写&#xff0c;直译过来&#xff0c;就是列举系统中已经被打开的文件。通过 lsof 命令&#xff0c;我们就可以根据文件找到对应的进程信息&#xff0c;也可以根据进程信息找到进程打开的文件。 格式&…

Jackson 2.x 系列【31】Spring Boot 集成之字典翻译

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 本系列Spring Boot 版本 3.2.4 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 场景描述2. 案例演示2.1 修改枚举2.2 定义注解…
最新文章