Angular邮箱正则表达式功能正常但Chrome控制台报错咨询

为啥会报错 #

控制台提示字符类中有无效字符，问题出在你写的正则表达式里：[a-zA-Z0-9._-]和[a-zA-Z.-]这两个字符类中的-位置不对。-在字符类里如果不放在开头或结尾，会被当作范围符（比如a-z表示a到z的字母），但你这里._-里的_-是试图表示从_到-的字符范围——可ASCII码中_的编码比-高，这个范围根本不合法。现在Chrome对正则语法检查更严格（尤其是默认启用的v模式），所以就算验证功能看似正常，也会抛出语法错误。

怎么改 #

把字符类里的-移到开头或者结尾，避免被解析成范围符即可：

修正后的组件代码 #

// 推荐写法：把-放在字符类末尾
public emailPattern = "^[a-zA-Z0-9._-]+@[a-zA-Z.-]+\\.[a-zA-Z]{2,}$";
// 也可以移到开头：
// public emailPattern = "^[-a-zA-Z0-9._]+@[-a-zA-Z.]+\\.[a-zA-Z]{2,}$";

验证说明 #

调整后，字符类中的-会被当作普通字符解析，Chrome控制台的报错会消失，同时邮箱验证的功能完全不受影响。另外你原来写的\\.是正确的——Angular中用字符串绑定正则时，需要双反斜杠转义点号，这部分不需要修改。

内容的提问来源于stack exchange，提问作者user3131148