HTML正則表達式模式：[\\ d \\ s-] {3}有效，但[\\ d- \\ s] {3}無效。 為什么？

Question

Codepen示例：
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

您定義了兩個不同的東西：

• [az]是范圍的定義-從a到z所有字符。
• [az-]是一組三個要素的定義- a ， z和-

Answer 2

真正的根本原因是在pattern HTML5屬性中使用了正則表達式[\\d-\\s] ，並且在最新版本的Chrome和FireFox中，使用u修飾符將其編譯為與ES2015兼容的正則表達式。 結果是Unicode正則表達式模式有更嚴格的轉義規則 。

這意味着每當無法明確解析char時，這就是一個錯誤。 當一個字符被轉義但不需要轉義時，它又是一個錯誤。

在基於u的正則表達式中的字符類中可能會逸出的字符是+ ， $ ， ^ ， * ， ( ， )和| ， \\ ， [ ， ] ， . ， ? ， - ， { ， } （請參見此源 ）。 如果-位於字符類的開頭/結尾，則它仍可以不轉義，因為它只能在此處解析為文字連字符。

在兩個速記字符類之間，未轉義的-將產生錯誤，因為它被視為用戶錯誤。

因此，可以在開始/結尾處放置一個連字符（始終是最佳選擇），或者在字符類內部將其轉義（並且永遠不要在字符類外部進行轉義）。