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, Dec 31 '16 at 16:08
` ` : Like so (it appears that the surrounding slashes are inserted so i have omitted them) — Maurice Byrne, Dec 31 '16 at 16:09
@NiettheDarkAbsol for example C:\Windows\System32\notepad.exe It works in online regex testers just not in practice. — Maurice Byrne, Dec 31 '16 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, Dec 31 '16 at 16:12
Try `pattern="(?:\w:|\\)(\\[\w\s.()~!@#$%^&=+';,{}[\]-]+)+\.exe"`. The `^` and `$` abchors are not necessary as this pattern is anchored by default. — Wiktor Stribiżew, Dec 31 '16 at 16:18
@WiktorStribiżew Thanks that worked, can you put it as an answer so i can mark it as accepted. — Maurice Byrne, Dec 31 '16 at 16:21

Wiktor Stribiżew · Accepted Answer · 2023-08-22T07:52:33.147

20

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 '23 at 07:52

answered Dec 31 '16 at 16:22

Wiktor Stribiżew

607,720
39
448
563

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 \ ? – rinilnath Dec 08 '21 at 11:52
1

@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 Dec 08 '21 at 11:52
so i can escape that \ without this?, i tried this in https://www.regextester.com/ it was escaping \, any easier way please – rinilnath Dec 08 '21 at 11:55
Stribizew, Thanks much, but one small doubt, is it ok to escape the "SPACE" character with backslash or i can just give the space somewhere in regex group – rinilnath Dec 08 '21 at 12:13
1

@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. – Wiktor Stribiżew Dec 08 '21 at 12:19
Lately, I discovered that [*JavaScript* introduced the **v** flag](https://v8.dev/features/regexp-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. – Patrick Janser Aug 22 '23 at 07:27
@PatrickJanser Yes, see [Valid with the RegExp u flag, but not with the v flag](https://stackoverflow.com/a/76287241/3832970). – Wiktor Stribiżew Aug 22 '23 at 07:48
@WiktorStribiżew: but how do we set the flag? as the pattern is automatically enclosed by `^(?:` and `)$` and doesn't have pattern delimiters, will the flags be automatically enabled (for example the **u** or **v** flags)? Or should one add them in the pattern? I know that *PCRE* handles inline flags such as `(?i:help)` but *JavaScript* doesn't seem to :-/ – Patrick Janser Aug 22 '23 at 08:08
1

@PatrickJanser You can't set flags in `pattern` attribute. They are "hard-coded". – Wiktor Stribiżew Aug 22 '23 at 08:12

invalid escape in pattern HTML/Javascript

1 Answers1

Linked

Related