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

Question

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>

Answer 1

You define two different things:

• [az] is a definition of a range - all characters from a to z .
• [az-] is a definition of a set of three elements - a , z and - .

Answer 2

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