当前位置: 首页 > news >正文

js 正则表达式配合replace进行过滤html字符串遇到的性能问题

问题场景复现:

博主要实现一个邮箱列表,其中列表中的每一封邮件都有一个摘要,但是摘要是要自己从后端提供的content内容区自己过滤掉所有,只留下纯文本内容的前面几行作为摘要。

性能问题

当我测试到一个邮箱,其中的邮件内容非常多,达到3万多字符的时候,明显看到速度慢了很多,每一封此类邮件替换需要花费1-2s的时间,一页20条,会发现总时间要30多s。

解决办法

通过创建一个临时的div标签作为容器,设置他的innerHTML内容,然后替换掉head标签中的文本内容,防止head文本作为摘要被纳入。再通过该divtextContent这个api获取纯文本内容,这个api可以替我们去除非文本的其他内容。这样我们巧妙的利用了html自带的功能替我们实现了正则替换一样的功能,这种方式的性能高得多。

    const filteredString = htmlString.replace(/<head([\s\S])*?<\/head>/gi, '');const tempDiv = document.createElement('div');tempDiv.innerHTML = filteredString;const resultStr = tempDiv.textContent?.trim() || '';console.log('>>>>>> filteredString', filteredString);console.log('>>>>>>>>> resultStr', resultStr);

原因详细解析:

当字符数量较多时,使用replace配合正则表达式可能会有性能问题的原因主要有两个:
  • 正则表达式的处理复杂度:正则表达式的匹配和替换操作通常比较复杂,特别是当需要处理大量字符时,正则表达式的处理复杂度会相应增加。正则表达式引擎在处理长字符串时可能需要进行多次匹配和回溯操作,这会导致性能下降。

  • replace 的执行次数:replace方法会在字符串中搜索并替换所有匹配的字符或模式。如果字符数量很多,那么替换操作也会频繁执行很多次,这会增加整体的执行时间。

为了提高性能,可以考虑以下几点:

  • 尽量避免使用正则表达式:如果匹配的规则不复杂,可以尝试使用更简单的字符串操作代替正则表达式,比如indexOf和substring等方法。

  • 使用字符串替代方法:如果只需要替换指定字符或模式,可以使用字符串的split和join方法代替replace方法,这样可以减少正则表达式的使用。

  • 增量替换:如果需要对一个较大的字符串进行多次替换操作,可以考虑使用增量替换的方法,即每次只替换一部分字符,而不是一次替换所有匹配项。这样可以分散执行时间,减少整体的执行负担。

  • 考虑使用更高效的工具或库:如果替换操作非常频繁或需要处理大量字符,可以考虑使用专门针对字符串处理性能优化的工具或库,比如re模块中的sub方法或者一些第三方库。

总之,在字符数量较多时,合理选择替换方法和工具,避免不必要的正则表达式和频繁的替换操作,可以提高性能并减少执行时间。

相关文章:

js 正则表达式配合replace进行过滤html字符串遇到的性能问题

问题场景复现&#xff1a; 博主要实现一个邮箱列表&#xff0c;其中列表中的每一封邮件都有一个摘要&#xff0c;但是摘要是要自己从后端提供的content内容区自己过滤掉所有&#xff0c;只留下纯文本内容的前面几行作为摘要。 性能问题 当我测试到一个邮箱&#xff0c;其中的…...

2022牛客寒假算法基础集训营1

B题 炸鸡块君与FIFA22 题目大意&#xff1a; 给出胜负序列&#xff0c;每次询问区间 (l,r,s) &#xff0c;回答在经历 (l-r) 之后积分是多少&#xff0c;初始积分为 (s) 胜 (1) 积分&#xff0c;平 (0) 积分&#xff0c;败的时候如果此时积分为 (3) 的倍数则 (-0) &#xff0c…...

API对接:构建连接不同系统的技术桥梁

API&#xff08;Application Programming Interface&#xff09;是一种用于不同软件系统之间进行通信和数据交换的技术。本文将介绍API对接的基本概念和原理&#xff0c;并通过代码示例演示如何使用API对接不同系统&#xff0c;解决数据传输与通信的难题。 在当今数字化时代&a…...

【MySQL】仓储--维护出入库流水、库存,去重数量逻辑修正

系列文章 C#底层库–MySQLBuilder脚本构建类&#xff08;select、insert、update、in、带条件的SQL自动生成&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类&#xff08;推荐阅读&#xff0…...

用Log4j 2记录日志

说明 maven工程中增加对Log4j 2的依赖 下面代码示例的maven工程中的pom.xml文件中需要增加对Log4j 2的依赖&#xff1a; <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.20.0&…...

【Java面试】Paxos和Raft协议的区别?

面试官&#xff1a;你简历上说了解Paxos和Raft协议&#xff0c;说一下你对这两个协议的了解&#xff1f; 我&#xff1a;Paxos算法和Raft算法都是用于实现分布式系统中的一致性的算法&#xff0c;确保不同节点之间的数据一致。 我&#xff1a;Paxos算法它的目标是使多个节点能…...

手机浏览器H5打开微信小程序支付,自定义传参

微信官方提供的开放文档如下&#xff1a; 静态网站 H5 跳小程序 | 微信开放文档 想必大家都能看懂官网提供的文档&#xff0c;但实战时却遇到很多问题&#xff0c;博主总结一下遇到的坑&#xff0c;如果您也有遇到&#xff0c;希望可以帮到您。 1.小程序已经发布上线了&…...

Aligning Large Language Models with Human: A Survey

本文也是LLM相关的综述文章&#xff0c;针对《Aligning Large Language Models with Human: A Survey》的翻译。 对齐人类与大语言模型&#xff1a;综述 摘要1 引言2 对齐数据收集2.1 来自人类的指令2.1.1 NLP基准2.1.2 人工构造指令 2.2 来自强大LLM的指令2.2.1 自指令2.2.2 …...

windows图标白了,刷新图标

1.进入C盘&#xff0c;user(用户文件夹)&#xff0c;进入当前用户文件夹&#xff0c;再进入隐藏文件夹(AppDada)&#xff0c;最后进入Local 2.删除Local文件夹里的IconCache.db文件 3.重启资源管理器 -------------------------------------------- 或者创建bat文件&#xf…...

C++ 左值和右值

C 左值和右值 左值、右值左值引用、右值引用std::move()std::move()的实现引用折叠 完美转发forward()的实现函数返回值是左值还是右值如何判断一个值是左值还是右值 左值、右值 在C11中所有的值必属于左值、右值两者之一&#xff0c;右值又可以细分为纯右值、将亡值。在C11中…...

c++学习(智能指针)[29]

RALL RALL&#xff08;Resource Acquisition Is Initialization&#xff09;是一种 C 的编程技术&#xff0c;用于管理资源的获取和释放。它的基本思想是在对象的构造函数中获取资源&#xff0c;在对象的析构函数中释放资源&#xff0c;从而确保资源的正确获取和释放。 RALL 的…...

B站高播放又涨粉的带货UP主怎么做?

飞瓜数据&#xff08;B站版&#xff09;上线新功能【带货达人榜】&#xff0c;由榜单显示&#xff0c;B站7月带货达人中&#xff0c;平均播放量最高的是UP主下个月一定中100万。 带货视频仅1支&#xff0c;播放量已经高达679万&#xff0c;值得一提的是&#xff0c;6月他也是带…...

AD21 PCB设计的高级应用(四)FPGA的管脚交换功能

&#xff08;四&#xff09;FPGA的管脚交换功能 高速 PCB 设计过程中,涉及的 FPGA等可编程器件管脚繁多,也因此导致布线的烦琐与困难&#xff0c;Altium Designer 可实现 PCB 中 FPGA 的管脚交换&#xff0c;方便走线。 1.FPGA管脚交换的要求 (1)一般情况下,相同电压的 Bank之…...

超低功耗LCD段码屏驱动显示芯片VK1621原厂芯片

型 号&#xff1a;VK1621 / 品 牌&#xff1a;VINKA/永嘉微电 最新年份 VK1621 是一个324的LCD驱动器&#xff0c;可软体程式控制使其适用于多样化的LCD应用线路&#xff0c;仅用到3至4条信号线便可控制LCD驱动器&#xff0c;除此之外也可介由指令使其進入省电模式 M1855 …...

【深入探索Docker】:开启容器化时代的技术奇迹

深入探索Docker 深入探索Docker&#xff1a;开启容器化时代的技术奇迹前言1. 容器化&#xff1a;实现快速部署和可移植性2. 虚拟化&#xff1a;提高安全性和可靠性3. 映像&#xff1a;打包应用及依赖项的模板4. 网络管理&#xff1a;连接容器和主机5. 持久化数据&#xff1a;保…...

【Ajax】笔记-JQuery发送jsonp请求

前端 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>jQuery-jsonp</title><style>#re…...

docker更换数据存储路径

1. 先停掉docker服务 sudo systemctl stop docker 可能会出现的问题&#xff1a; 这样会导致docker关闭失败,解决办法&#xff1a;systemctl stop docker.socket 确保docker关闭: 2.备份现在的 Docker 数据存储目录 /var/lib/docker(默认路径) mv /var/lib/docker /var/lib/…...

GPT告诉你如何延长周末体验

对于常常感到疲劳的打工人和学生党&#xff0c;过周末需要找到一种平衡&#xff0c;既能够休息放松&#xff0c;又能够提升身心能量。以下是一些建议&#xff0c;希望对你有所帮助&#xff1a; 制定休息计划&#xff1a;在周末前&#xff0c;制定一个休息计划&#xff0c;明确…...

一百四十一、Kettle——kettle8.2在Windows本地开启carte服务以及配置子服务器

一、目的 在kettle建好共享资源库后&#xff0c;为了给在服务器上部署kettle的carte服务躺雷&#xff0c;先在Windows本地测试一下怎么玩carte服务 二、Kettle版本以及在Windows本地安装路径 kettle版本是8.2 pdi-ce-8.2.0.0-342 kettle本地安装路径是D:\j…...

你知道充电桩控制主板的结构吗?

你知道充电桩控制主板的结构吗? 你是否曾经遇到过电动车行驶途中突然没电的情况?不用担心&#xff0c;解决这个问题的方法之一就是使用充电桩。那么&#xff0c;控制主板是如何控制充电桩的呢?让我们一起来探究一下。 充电桩控制主板由多种元件组成&#xff0c;包括主控芯片…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...