Invalid Javascript regex range in character class

Question

I am using the regex pattern that I got from regexlib to check relative URLs. On your site, you can test the template to make sure that it meets your needs. Everything works fine on my site, as soon as I use the template in my message, I get an error message:

Invalid range in character class

I know that this error usually means that a hyphen is mistakenly used to represent a range and is incorrectly escaped. But in this case, since it works on their site, I am confused why it does not work on mine.

var urlRegex = new RegExp('^(?:(?:\.\./)|/)?(?:\w(?:[\w`~!$=;\-\+\.\^\(\)\|\{\}\[\]]|(?:%\d\d))*\w?)?(?:/\w(?:[\w`~!$=;\-\+\.\^\(\)\|\{\}\[\]]|(?:%\d\d))*\w?)*(?:\?[^#]+)?(?:#[a-z0-9]\w*)?$', 'g'); 

Note: If you are going to test the regular expression from your site (using the link above), be sure to change the Regex Engine drop-down menu to Client-side Engine and Engine to Javascript .

Answer 1

Put - at the end or the beginning of a character class or using two backslashes . escape regular expression in string

since you are using a string, you need to use two backslashes for each special character.

---

Note

Check out this SO answer, which explains when to use single or double backslash to call special characters

Answer 2

There is no reason to use the RegExp constructor here. Just use RegExp literal:

 var urlRegex = /^(?:(?:\.\.\/)|\/)?(?:\w(?:[\w`~!$=;\-\+\.\^\(\)\|\{\}\[\]]|(?:%\d\d))*\w?)?(?:\/\w(?:[\w`~!$=;\-\+\.\^\(\)\|\{\}\[\]]|(?:%\d\d))*\w?)*(?:\?[^#]+)?(?:#[a-z0-9]\w*)?$/g; ^ ^ ^ ^ ^ 

Inside the RegExp literal, you simply write a regular expression, with the exception of / , which now requires escaping, since / used as a delimiter in the RegExp literal.

In the character class, ^ has a special meaning at the beginning of the character class, - has a special meaning between two characters, and \ has a special meaning, which is to hide other characters (basically ^ , - , [ , ] and \ ), and also indicate abbreviated character classes ( \d , \s , \w , ...). [ , ] are used as delimiters for a character class, so they also have special meaning. (In fact, in JavaScript only ] has special meaning, and you can specify [ without escaping inside the character class). Besides the 5 characters listed above, other characters (if they are not involved in the escape sequence with \ ) do not have much meaning.

You can reduce the number of screens \ with the above information. For ^ , unless it is the only character in a character class, you can remove it from the beginning of the character class. For - you can put it at the end of the character class.

 var urlRegex = /^(?:(?:\.\.\/)|\/)?(?:\w(?:[\w`~!$=;+.^()|{}\[\]-]|(?:%\d\d))*\w?)?(?:\/\w(?:[\w`~!$=;+.^()|{}\[\]-]|(?:%\d\d))*\w?)*(?:\?[^#]+)?(?:#[a-z0-9]\w*)?$/g; 

What changed:

 [\w`~!$=;\-\+\.\^\(\)\|\{\}\[\]] [\w`~!$=;+.^()|{}\[\]-]