HTML正規表現パターン：[\ d \ s - ] {3}は動作しますが、[\ d- \ s] {3}は動作しません。どうして？

Question

コード例：
https://codepen.io/Trost/pen/KXBRbY
両方のフィールドに1つの記号を入れてみてください。
私は何が間違っている得ることができません。 https://regex101.comでこれらの正規表現をテストすると、それらは同じに見えます。

<form> 
    Works: <input type="text" name="country_code" pattern="[\d\s-]{3}" title="-23" required> 
    <input type="submit"> 
</form> 
<form> 
    Bug: <input type="text" name="country_code" pattern="[\d-\s]{3}" title="- 3" required> 
    <input type="submit"> 
</form> 

Answer 1

本当の根本的な原因は、正規表現[\d-\s]がpattern HTML5属性で使用されている、とChromeとFirefoxの最新バージョンでu修飾子とES2015互換の正規表現としてコンパイルされていることです。結果として、より厳密なエスケープ規則がUnicode正規表現パターンに対して存在することになります。それが何を意味

は、charが明確に解析できない時はいつでも、それは誤りです。 charがエスケープされてもエスケープする必要がない場合は、もう一度エラーになります。あなたはuベースの正規表現内の文字クラスに逃れること

文字は+、$、^、*、(、)、|、\、[、]、.、?、-、{、}（ありますthis source参照）。 -が文字クラスの先頭/末尾にある場合、それはリテラルハイフンとしてのみ解析できるため、エスケープされません。

2つの短縮文字クラスの間で、エスケープされていない-は、ユーザーエラーとして扱われるため、エラーが発生します。

先頭/末尾にハイフンを置くか（常に最適なオプションです）、それを文字クラスの内部でエスケープしてください（そして文字クラスの外にエスケープしないでください）。

Answer 2

次の2つの異なるものを定義： - aからzまでのすべての文字

• [a-z]は、範囲の定義です。
• [az-]は、a,zおよび -の3つの要素のセットの定義です。ここ