Html 正则表达式模式: [\d\s-]3 有效,但 [\d-\s]3 无效。为啥?

Posted

技术标签:

【中文标题】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 正则表达式。 【参考方案1】:

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

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

【讨论】:

【参考方案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.

以上是关于Html 正则表达式模式: [\d\s-]3 有效,但 [\d-\s]3 无效。为啥?的主要内容,如果未能解决你的问题,请参考以下文章

时间表达式字符串的正则表达式模式

正则表达式之贪婪模式

PHP正则表达式 /i, /s, /x,/u, /U, /A, /D, /S等模式修饰符

正则表达式

scanf中的正则表达式?

使用正则表达式验证瑞典电话号码