Can some one help me fix this regex

Question

Pattern attribute value ^[-\w\.\$@\*\!]{1,30}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[-\w\.\$@\*\!]{1,30}$/: Invalid escape

I am using like this in angular.

 <input pattern='^[-\w\.\$@\*\!]{1,30}$' />

It would be great if you tell more about this. What are you trying to accomplish and what you tried. If you need to test the regex try [regex101.com](http://regex101.com) — Gowtham, Mar 11 '19 at 12:25
I am getting this error in console when i am entering something in username field.There are username regex out there but i just want to know what is the error in this expression.Is it not following any rules? — Naveen, Mar 11 '19 at 12:32
Works for me, I don't get any errors when I run the snippet. Which browser are you using? — Toto, Mar 11 '19 at 12:34
Possible duplicate of [Firefox error: Unable to check input because the pattern is not a valid regexp: invalid identity escape in regular expression](https://stackoverflow.com/questions/36953775/firefox-error-unable-to-check-input-because-the-pattern-is-not-a-valid-regexp) — yunzen, Mar 11 '19 at 13:11
@Naveen Look at my answer. I've added some detail about the cause for this issue — yunzen, Mar 11 '19 at 13:47

score 2 · Answer 1 · answered Mar 11 '19 at 12:41

2

I don't know why (speculation: Bug in Chrome) but removing the escape before the exclamation mark resolves the problem when I test it.

Inside a [...] group, \! and ! are equivalent.

 <input pattern='^[-\w\.\$@\*!]{1,30}$' />

answered Mar 11 '19 at 12:41

Quentin

914,110
126
1,211
1,335

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The error message tells you Invalid escape (Chrome) or invalid identity escape in regular expression (Firefox). So one or more of your escapes ("\<any-character>") is not right.

I removed every backslash from your Regex except for the \w. Those are not needed, because you only need to escape characters that are special characters. As your RegEx mainly consists of a character class only special characters in character classes need to be escaped. ., $, *, ! are not special characters in character classes. And the - is not a special character, if it doesn't come first (or second after a ^).

input {
  border: 2px solid;
}

input:valid {
  border-color: green;
  background: rgba(0, 255, 0, 0.3);
}

input:invalid {
  border-color: red;
  background: rgba(255, 0, 0, 0.3);
}

With escaped <code>!<code> => <code>^[-\w.$@*\!]{1,30}</code><br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a" /> Should be valid, but throws error<br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a a " /> Should be invalid, but throws error<br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a!@@$-!...@" /> Should be valid, but throws error<br>
<br>
Without escaped <code>!<code> => <code>^[-\w.$@*!]{1,30}</code><br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a" /> Should be valid<br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a a " /> Should be invalid<br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a!@@$-!...@" /> Should be valid<br>

Explanation

The pattern always sets the u flag for the RegEx. u here means Unicode. From: https://mathiasbynens.be/notes/es6-unicode-regex#impact-html

The u flag is always enabled for regular expressions compiled through the HTML pattern attribute. Here’s a demo / test case.

But the Unicode flag will only allow reserved escape sequences, and \! is not one of those as ! is never a special character.

From: https://mathiasbynens.be/notes/es6-unicode-regex#impact-syntax

things like \a (where a is not an escape character) won’t be equivalent to a anymore. So even though /\a/ is treated as /a/, /\a/u throws an error, because \a is not a reserved escape sequence.

P.S.: Microsoft Edge browser does seem to be Unicode capable, as this code will throw an error /\!/u, even with the best and most telling error message of all the browsers: "invalid escape in unicode pattern", but it does not seem the set the unicode flag on pattern attributes.

Can some one help me fix this regex

2 Answers2

Explanation