Html正则表达式模式：[\ d \ s - ] {3}有效，但[\ d-\s] {3}不适用。为什么？ [英] Html regex pattern: [\d\s-]{3} works but [\d-\s]{3} doesn't. Why?

问题描述

Codepen示例：

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

字符类中的字符可以在 u 基于正则表达式是 + ， $ ， ^ ， * ，（，）， | ， \ ， [，] ，。，？， - ， {，} （请参阅 this source ）。如果 - 位于字符类的开始/结尾处，它仍然可以未转义，因为它只能在那里被解析为文字连字符。

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

所以，要么在开始/结束时加一个连字符（它总是最好的选择），要么在字符类中转义它（并且永远不会在字符类）。

Codepen example:
https://codepen.io/Trost/pen/KXBRbY
Try putting 1 symbol in both fields.
I can't get what's wrong. If I test these regex in https://regex101.com, they appear to be identical.

<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>

解决方案

The real root cause here is that the regex [\d-\s] is used in the pattern HTML5 attribute, and in the latest versions of Chrome and FireFox is compiled as an ES2015-compatible regex with the u modifier. The consequence is that there are much stricter escaping rules for the Unicode regex patterns.

What it means is whenever a char cannot be parsed unambiguously, it is an error. When a char is escaped, but does not need escaping, it is again an error.

The chars that you may escape in the character class inside a u based regex are +, $, ^, *, (, ), |, \, [, ], ., ?, -, {, } (see this source). If the - is at the start/end of the character class, it still can go unescaped, as it can only be parsed as a literal hyphen there.

In between two shorthand character classes, an unescaped - will produce an error because it is treated as a user error.

So, either place a hyphen at the start/end (it is always the best option), or escape it inside the character class (and never escape it outside of the character class).

这篇关于Html正则表达式模式：[\ d \ s - ] {3}有效，但[\ d-\s] {3}不适用。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！