なぜ、私は次のようになります： "正規表現が無効です。Uncaught SyntaxError。Invalid escape。"

Question

1の2つのフォーマットで入力された数字だけを受け入れるhtml入力タグを作成しようとしており、他のすべての入力を拒否しています。私はダッシュを必要とするなど、のみこれらの形式の番号、受け入れたく

：

1234-12 

と

1234-12-12 

注：これは、日付ではなく、法的章番号のためではありません

正規表現について私が読んでいるすべては、次のものがうまくいくはずだと言いますが、そうではありません。 Chromeで

<input class="form-control" 
         type="text" 
         pattern="^(\d{4}\-\d{2}\-\d{2})|(\d{4}\-\d{2})$" 
         required /> 

デベロッパーツールコンソールエラー：

Pattern attribute value ^(\d{4}\-\d{2}\-\d{2})|(\d{4}\-\d{2})$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^(\d{4}-\d{2}-\d{2})|(\d{4}-\d{2})$/: Invalid escape

Answer 1

あなたはuフラグ（中pattern正規表現でデフォルトで使用されるもので使用ES6の正規表現における文字クラスの外にハイフンを逃れるべきではありません現在のバージョンのChromeとFF）。

また、pattern属性で正規表現はデフォルトで固定されている、オプションのグループを使用してパターンをredudant ^と$を削除し、短縮

pattern="\d{4}-\d{2}(-\d{2})?" 

はHTML5 pattern属性でこの正規表現は、意味

：

\d{4}-\d{2}
• - マッチ4桁、-、および文字列の先頭から、次に2桁の数字
• (-\d{2})? - オプションで-と一致し、文字列の最後に2桁の数字が入ります。