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

【问题标题】：Html regex pattern: [\d\s-]{3} works but [\d-\s]{3} doesn't. Why?Html 正则表达式模式： [\d\s-]{3} 有效，但 [\d-\s]{3} 无效。为什么？
【发布时间】：2018-03-24 15:58:59
【问题描述】：

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>

【问题讨论】：

- 在[] 字符类的中间使用时具有特殊含义。但是有\d 和\s 围绕它，它并没有多大意义，因此它可能会失败，具体取决于实现。但在[\d\s-] 中，它位于类的末尾，这意味着它没有特殊含义。
这是因为您在 regex101.com 上使用 PCRE 选项进行测试，并且在 HTML5 模式中，它被解析为带有 u 选项的 ES6 正则表达式。

标签： html regex html-input

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

因此，要么在开始/结束处放置一个连字符（它始终是最好的选择），要么在字符类中转义它（并且永远不要在字符类之外转义它）。

【讨论】：

谢谢。我忘记了“-”用于定义符号范围。它在 regex101.com 中工作的事实让我更加困惑。 TIL：您可以使用 /regex/.test("teststring"); 在 JS 控制台中测试正则表达式
@Trost Regex101 has its own bugs, too.