字符类中的 Javascript 正则表达式无效范围

Question

我正在使用从 regexlib 获得的正则表达式模式来验证相对 url。在他们的网站上，您可以test 该模式以确保它符合您的需求。一切都在他们的网站上运行良好，一旦我使用我的模式，我就会收到错误消息：

字符类中的范围无效

我知道这个错误通常意味着连字符被错误地用于表示范围并且没有正确转义。但在这种情况下，因为它可以在他们的网站上运行，我很困惑为什么它不能在我的网站上运行。

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

注意： 如果您要从他们的网站测试正则表达式（使用上面的链接），请务必将 Regex Engine 下拉列表更改为 Client-side Engine 并将 Engine 下拉列表更改为 Javascript。

Answer 1

将- 放在字符类的结束或开始或使用两个反斜杠在 string

中进行正则表达式转义

由于您使用的是字符串，因此您需要为每个特殊字符使用 两个反斜杠..

---

注意

查看 SO 上的 this 答案，其中解释了何时使用单反斜杠或双反斜杠来转义特殊字符

Answer 2

这里没有理由使用RegExp 构造函数。只需使用RegExp 文字：

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

在RegExp 文字中，您只需自然地编写正则表达式，除了/，现在需要转义，因为/ 在RegExp 文字中用作分隔符。

在字符类中，^在字符类开头有特殊含义，-在两个字符之间有特殊含义，\有特殊含义，即转义其他字符（主要是@987654331 @、-、[、] 和 \) 以及指定速记字符类 (\d, \s, \w, ...)。 [、]作为字符类的分隔符，也有特殊的含义。 （实际上，在 JavaScript 中，只有 ] 有特殊含义，您可以指定 [ 而无需在字符类内部转义）。除了上面列出的这 5 个字符之外，其他字符（除非涉及 \ 的转义序列）没有任何特殊含义。

您可以使用上述信息减少转义\ 的次数。对于^，除非它是字符类中唯一的字符，否则可以将其远离字符类的开头。对于-，可以放在字符类的末尾。

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

改变了什么：

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