Chrome hängt am Muster-Match (tinymce/magento2)

Question

Mein Chrom-Tab stürzt momentan ab/hängt, wenn ich den "Rückgängig" -Button des Tinymce-Editors im Magento 2-Backend verwende. Der Fehler tritt nur auf, wenn ich ihn innerhalb eines großen <table> benutze.

Mit Debugging, fand ich heraus, dass der Absturz durch den folgenden Code verursacht wird:

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 = "" 
     } 
} 

In der Situation des Absturzes, hat die Mustervariable den folgenden Inhalt:

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

Jetzt Die Quellvariable enthält nur eine riesige HTML-Tabelle ohne spezielle Angaben, nur Links, Bilder, Text.

Der Fehler passiert nicht mit kleineren HTML-Inhalten, so scheint es eine Art von Timeout/hängt an diesem Muster.

Hier ist ein jsfiddle des Problems: https://jsfiddle.net/sbbzcL9d/

Der Browser hier nicht abstürzen, weil es nur die Pattern-Matching, aber es stürzt im tinymce/magento Kontext.

Hat jemand eine Idee, was hier passiert?

Answer 1

Regexp ist normalerweise eine ziemlich teure Operation. In deiner Fidel benötigt der Regexp für die 9969 Zeichen lange Zeichenfolge 1,98 Sekunden.

Gemeinsam Rich-Text-Editoren, das rohe HTML-String könnte sogar länger sein. Zum Beispiel ist die Länge des HTML dieser Seite ungefähr 145260 Zeichen lang. Unter der Annahme, dass die Zeitkomplexität proportional ist, würde die Berechnung etwa 30 Sekunden dauern.

Mein Rat ist, versuchen Sie nicht, die Regexp auf eine extrem lange Zeichenfolge anzuwenden. Wenden Sie es stattdessen nur auf die relevanten Teile an.