javascript - Chrome 因模式匹配而挂起(tinymce/magento2)

Question

如果我在 magento 2 后端使用tinymce 编辑器的“撤消”按钮，我的 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 = ""
        }
}

在崩溃的情况下，pattern变量有以下内容:

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

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

较小的 html 内容不会发生错误，因此似乎是该模式的某种超时/挂起。

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

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

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

Answer 1

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

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

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