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

真正的根本原因是正则表达式[\d-\s]用于pattern HTML5属性，而最新版本的Chrome和FireFox编译为与ES2015兼容的正则表达式{{ 1}}修饰符。结果是Unicode正则表达式模式有更严格的转义规则。

这意味着无论何时无法明确地解析char，都是错误的。当一个char被转义但不需要转义时，它又是一个错误。

您可以在基于u的正则表达式中的字符类中转义的字符为u，+，$，^，{{1 }}，*，(，)，|，\，[，]，. ，?，-（见this source）。如果{位于字符类的开头/结尾，它仍然可以转义，因为它只能在那里解析为字面连字符。

在两个速记字符类之间，未转义的}会产生错误，因为它被视为用户错误。

因此，要么在开头/结尾放置一个连字符（它始终是最佳选项），要么在字符类中将其转义（并且永远不要在字符类之外转义它）。