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.

Answer 1

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

Use

pattern="(?:w:|\)(\[ws.()~!@#$%^&=+';,{}[]-]+)+.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.