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]
是范围的定义 - 从 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.以上是关于Html 正则表达式模式: [\d\s-]3 有效,但 [\d-\s]3 无效。为啥?的主要内容,如果未能解决你的问题,请参考以下文章