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

你定义了两个不同的东西：

[a-z]是一个范围的定义——所有从a到z的字符。
[az-] 是一组三个元素的定义 - a、z 和 -.

Answer 2

这里真正的根本原因是 pattern HTML5 属性中使用了正则表达式 [\d-\s]，并且在最新版本的 Chrome 和 FireFox 中被编译作为带有 u 修饰符的 ES2015 兼容正则表达式。结果是 Unicode 正则表达式模式有 更严格的转义规则。

它的意思是，每当一个字符不能被明确地解析时，它就是一个错误。当一个字符被转义，但不需要转义时，它又是一个错误。

在基于 u 的正则表达式中，您可以在字符 class 中转义的字符是 +、$、^、*, (, ), |, \, [, ], ., ? , -, {, }（参见 this source）。如果 - 在字符 class 的 start/end 处，它仍然可以不转义，因为它只能在那里被解析为文字连字符。

在两个 shorthand 字符 class 之间，未转义的 - 将产生错误，因为它被视为用户错误。

因此，要么在 start/end 处放置一个连字符（这始终是最佳选择），要么在字符 class 内将其转义（永远不要在字符 [=51 之外将其转义） =]).

Html 正则表达式模式：[\d\s-]{3} 有效，但 [\d-\s]{3} 无效。为什么？

Html regex pattern: [\d\s-]{3} works but [\d-\s]{3} doesn't. Why?

html

regex

html-input