uniapp 搜索内容关键字高亮

news/2024/9/24 17:17:39/

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

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

javascript">if (this.name) {let str = this.nameres.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>

http://www.ppmy.cn/news/1432780.html

相关文章

Qt Creator 调试控制台无法查看 log4z 的日志

qInstallMessageHandler(outputMessage); 重定向日志到 log4z 后无法查看打印的日志信息。 解决方法 改造 log4z 库&#xff0c;Android 环境下使用 qInfo 将日志输出到调试控制台。 void LogerManager::showColorText(const char *text, int level) {if(level < LOG_LEV…

cdh cm界面HDFS爆红:不良 : 该 DataNode 当前有 1 个卷故障。 临界阈值:任意。(Linux磁盘修复)

一、表现 1.cm界面 报错卷故障 检查该节点&#xff0c;发现存储大小和其他节点不一致&#xff0c;少了一块物理磁盘 2.查看该磁盘 目录无法访问 dmesg检查发现错误 dmesg | grep error二、解决办法 移除挂载 umount /data10 #可以移除挂载盘&#xff0c;或者移除挂载目…

IP地址定位:揭秘精准定位的技术与应用

在数字化时代&#xff0c;IP地址已成为连接互联网世界的关键标识之一。但是&#xff0c;很多人对于IP地址的精准定位能力存在疑虑。本文将深入探讨IP地址定位的技术原理以及其在实际应用中的精确度。 IP地址查询&#xff1a;IP数据云 - 免费IP地址查询 - 全球IP地址定位平台 …

2024 年中国VR行业研究报告

核心内容&#xff1a; 概述了当前 VR 行业的发展阶段、市场规模、产业环节及趋势&#xff0c;并对核心硬件、软件技术、内容应用等方面进行了详细介绍和分析。 概述&#xff1a; 1、行业发展阶段&#xff1a;新旧玩家推陈出新&#xff0c;特别是 Vision Pro 产品的问世&…

Java 文件上传,下载,复制,删除,Zip文件解压缩,文件内容修改,JSON 文件中字段值的修改,递归删除文件夹及其子文件等

Java 文件上传&#xff0c;下载&#xff0c;复制&#xff0c;删除&#xff0c;Zip文件解压缩&#xff0c;文件内容修改&#xff0c;JSON 文件中字段值的修改&#xff0c;递归删除文件夹及其子文件等 ControllerFileUtil Controller 文件批量上传批量删除文件文件下载 import …

(超级详细)JAVA之Stream流分析-------持续更新喔!!!

学习目标&#xff1a; 掌握 Java Stream流的相关api 掌握 Java Stream流的基本实现 掌握 java Stream流的使用场景 代码已经整理上传到了gitee中&#xff0c;有需要的小伙伴可以取查看一下源码点个小心心喔 大家也可以帮我提交一点案例喔&#xff01;&#xff01;&#xff01;&…

K8s: 在Pod里面创建init容器与健康检查

pod中init容器的创建 1 &#xff09;概述 每个 Pod 中可以包含多个容器&#xff0c; 应用运行在这些容器里面同时 Pod 也可以有一个或多个先于应用容器启动的 Init 容器Init 容器与普通的容器非常像&#xff0c;除了如下两点 a. 它们总是运行到完成。b. 每个都必须在下一个启动…

QtCharts 组件

Qtcharts 组件基于GraphicsView模式实现&#xff0c;其核心是QChartView和QChart的二次封装版。 在pro文件中包含QT charts来引入绘图类库。 头文件中定义QT_CHARTS_USE_NAMESPACE宏&#xff0c;这样才可以正常的使用绘图功能。 一般情况下我们会在mainwindows.h头文件中增…