invalid escape in pattern HTML/Javascript

Question

I am trying to make an <input> field that uses a pattern to check if the input is a valid windows file path.

The pattern I have is

/^(?:[\w]\:|\\)(\\[a-zA-Z_\-\s0-9\.()~!@#$%^&=+';,{}\[\]]+)+\.(exe)$/g

However, when putting this into the pattern attribute of an <input> field:

<input id="path" type="text" pattern="^(?:[\w]\:|\)(\[a-zA-Z_\-\s0-9\.()~!@#$%^&=+';,{}[]]+)+\.(exe)$">

An error is displayed in the console saying:

Pattern attribute value
^(?:[\w]\:|\\)(\\[a-zA-Z_\-\s0-9\.()~!@#$%^&=+';,{}\[\]]+)+\.(exe)$ is
not a valid regular expression:  Uncaught SyntaxError: Invalid regular
expression: /^(?:[\w]\:|\\)(\\[a-zA-Z_\-\s0-9\.()~!@#$%^&=+';,{}\[\]]+)+\.(exe)$/:
Invalid escape

I have tried several ways of writing this pattern, but none seem to work.

How is that pattern "put" into the pattern attribute? Is it through JavaScript or is it directly in the HTML? — Pointy
– Pointy, Commented Dec 31, 2016 at 16:08
` <input id="path" type="text" pattern="^(?:[\w]\:|\)(\[a-zA-Z_\-\s0-9\.()~!@#$%^&=+';,{}[]]+)+\.(exe)$"> ` : Like so (it appears that the surrounding slashes are inserted so i have omitted them) — Maurice Byrne
– Maurice Byrne, Commented Dec 31, 2016 at 16:09
@NiettheDarkAbsol for example C:\Windows\System32\notepad.exe It works in online regex testers just not in practice. — Maurice Byrne
– Maurice Byrne, Commented Dec 31, 2016 at 16:11
The pattern attribute already matches the whole string, so ^ and $ are not needed. It's worth also noting that file paths can use / instead of \. — Niet the Dark Absol
– Niet the Dark Absol, Commented Dec 31, 2016 at 16:12

Wiktor Stribiżew · Accepted Answer · 2023-08-22 07:52:33Z

23

You only need to escape the characters in the character class that must be escaped otherwise, you will always get this error.

2023 Update:

Now, that pattern attribute is compiled with the v flag, escaping rules have become way stricter. See Valid with the RegExp u flag, but not with the v flag for more details.

The current solution will look like

pattern="(?:\w:|\\)(\\[\w\s.\(\)~!@#$%^&=+';,\{\}\[\]\-]+)+\.exe"

Note the [, {, }, ( and ) that are escaped now.

Original answer

Use

pattern="(?:\w:|\\)(\\[\w\s.()~!@#$%^&=+';,{}[\]-]+)+\.exe"

See the JSFiddle

Details:

The hyphen must be at the end of the character class
The ] inside the character class must be escaped
The [ and . must not be escaped
The : must never be esacaped, it is never a special character
[a-zA-Z0-9_] = \w
The pattern is always anchored by default, you need no ^ and $ anchors.

edited Aug 22, 2023 at 7:52

answered Dec 31, 2016 at 16:22

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rinilnath Over a year ago

Invalid regular expression: /[\w'\,\.()\-\\/\+\!]{1,}/: Invalid escape, I am getting this error for one of my form:input tags regex in pattern attribute, in JSP page. Any suggestions on this escaping of backslash \ ?

Wiktor Stribiżew Over a year ago

@rinilnath Of course. Why did you escape every char in the character class? You only need to escape the characters in the character class that must be escaped. So, something like pattern="[\w\x27,.()/+!-]+" will work.

Wiktor Stribiżew Over a year ago

@rinilnath You only need to escape the characters in the character class that must be escaped. Is space a special regex metacharacter? No. So, DON'T.

Patrick Janser Over a year ago

Lately, I discovered that JavaScript introduced the v flag. It seems to be also enabled on the pattern HTML attribute because I was having a character class containing a hyphen, which I put at the end [a-z-], but it didn't work on Chrome, perhaps because I was using \p{L}, probably triggering the v flag. You now need to escape it: [a-z\-]. I thought this might be useful as things have changed quite a lot since your answer in 2016! Typically, it's now possible to do difference/subtraction or intersection on character classes.

Wiktor Stribiżew Over a year ago

@PatrickJanser You can't set flags in pattern attribute. They are "hard-coded".

|

Collectives™ on Stack Overflow

invalid escape in pattern HTML/Javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related