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方法或者一些第三方库。

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

相关推荐
游荡de蝌蚪9 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
June_liu2 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript
云枫晖2 小时前
手写Promise-then的基础实现
前端·javascript
养生达人_zzzz2 小时前
飞书三方登录功能实现与行业思考
前端·javascript·架构
GarrettGao2 小时前
Frida常见用法
javascript·python·逆向
肥晨2 小时前
前端私有化变量还只会加前缀嘛?保姆级教程教你4种私有化变量方法
前端·javascript
小高0072 小时前
前端 Class 不是花架子!3 个大厂常用场景,告诉你它有多实用
前端·javascript·面试
没有鸡汤吃不下饭4 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上4 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort6 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript