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

问题场景复现:

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

性能问题

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

解决办法

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

javascript 复制代码
    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方法或者一些第三方库。

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

相关推荐
百思可瑞教育1 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
Enddme2 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
力Mer3 小时前
全排列-遇到的深浅拷贝问题
javascript
德育处主任3 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
安卓开发者3 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
fdc20173 小时前
Avalonia 基础导航实现:从页面切换到响应式交互全指南
开发语言·javascript·ecmascript
小菜花294 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
前端小巷子5 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
知识分享小能手5 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
hashiqimiya6 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html