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

问题场景复现：

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

性能问题

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

解决办法

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

    const filteredString = htmlString.replace(//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方法或者一些第三方库。

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