Html regex pattern: [\\d\\s-]{3} works but [\\d-\\s]{3} doesn't. Why?

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

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

Answer 2

You define two different things:

• [a-z] 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 -.