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,

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