Chrome挂起模式匹配（tinymce / magento2）

Question

如果我使用magento 2后端内的tinymce编辑器的＆＃34;撤消＆＃34; - 按钮，我的chrome选项卡当前会崩溃/挂起。如果我在巨大的<table>内使用它，则只会发生错误。

通过调试，我发现崩溃是由以下代码引起的：

while (source.length > 0) {
        if (match = source.match(pattern)) { // error happens here
            result += source.slice(0, match.index);
            result += String.interpret(replacement(match));
            source = source.slice(match.index + match[0].length)
        } else {
            result += source,
            source = ""
        }
}

在崩溃的情况下，模式变量具有以下内容：

var pattern = /<([a-z0-9\-\_]+.+?)([a-z0-9\-\_]+=".*?\{\{.+?\}\}.*?".+?)>/i;

现在源变量只包含一个没有任何特定内容的巨大html表，只包含链接，图像，文本。

错误不会发生在较小的html内容中，所以它似乎是某种超时/挂起的模式。

这是问题的一个方面： https://jsfiddle.net/sbbzcL9d/

浏览器在这里没有崩溃，因为它只是模式匹配，但它在tinymce / magento上下文中崩溃。

有没有人知道这里发生了什么？

Answer 1

Regexp通常是一项非常昂贵的操作。在您的小提琴中，在9969个字符长的字符串上运行正则表达式需要1.98秒才能完成。

在常见的富文本编辑器中，原始HTML字符串可能更长。例如，此页面的HTML长度约为145260个字符。假设时间复杂度成比例，计算大约需要30秒。

我的建议是尽量不要在极长的字符串上应用正则表达式。相反，只将其应用于相关部分。