Warum funktioniert diese einfache Regex überall außer html5 Eingabemuster-Attribut?

Question

This HTML input färbt sich rot, um anzuzeigen, dass das Muster nicht übereinstimmt, wenn der Wert in der Eingabe "1" ist.

var inp = document .createElement ('input'); 
inp .pattern = '^\d+\.?\d*$'; 
document .getElementById ("foo") .appendChild (inp); 

Die Regex /^\d+\.?\d*$/ matches "1", wenn ich es an anderer Stelle testen. Sieht so aus als müsste es auch.

Warum stimmt das Formularelement nicht überein? (Firefox.)

Answer 1

String-Darstellungen, Sohn.

Die Verwendung des Musterattributs ist insofern korrekt, als Sie Zeichenfolgenliterale verwenden. Von MDN:

Die reguläre Ausdruck Sprache ist die gleiche wie JavaScript. Das Muster ist nicht von Schrägstrichen umgeben.

jedoch in Stringliterale müssen Sie die \ entkommen, bevor der Schrägstrich seine eigene li'l Interpretation in einem String wörtlichen Sinn bekommt. Wenn Sie es entkommen, wird es als ein tatsächlicher Schrägstrich und dann das gesamte Muster wird von der RegExp-Engine als ein Sonderzeichen erkannt werden.

var inp = document.createElement('input'); 
inp.pattern = '^\\d+\\.?\\d*$'; 
document.getElementById("foo").appendChild(inp); 

https://jsfiddle.net/qatt3rwt/4/