Chrome使用低效正则、HTML pattern或AngularJS自定义校验器出现卡死问题

问题根源 #

你遇到的Chrome卡死问题是正则表达式灾难性回溯导致的，和Angular本身没有直接关联：
你写的邮箱正则/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/中，([\.-]?\w+)*是典型的高回溯风险结构：

• 分组内部\w+是贪婪匹配多个字符，外层又套了*支持重复0次或多次，同时分组开头的[\.-]还是可选的?修饰符
• 当输入的字符串较长且不符合匹配规则（比如邮箱后缀长度超过你限制的2-3位），正则引擎找不到匹配结果时，会回溯穷举所有可能的分组拆分方式，穷举路径随字符长度指数级增长，直接占满CPU导致页面卡死。
  不同浏览器表现不同是因为各厂商的正则引擎优化逻辑不同：Safari对这种极端回溯场景做了提前终止处理，而旧版本Chrome的V8引擎没有对应的优化策略，所以只会持续消耗计算资源。

可行解决方案 #

你已经测试过的两种方案都是合理的，本质都是选择了回溯风险极低的成熟正则：

1. 直接使用Angular官方提供的邮箱校验正则，该正则严格遵循RFC规范编写，所有分组采用非捕获格式，且提前增加了长度断言限制，从根源上避免了大量回溯的可能。
2. 使用你最终选择的通用邮箱正则，该正则的实际业务匹配度更高，结构上没有嵌套的贪婪量词，回溯风险极低，更适合大多数业务场景。

另外还可以根据业务需求补充以下优化手段：

• 如果不需要兼容RFC规定的特殊格式邮箱，只需要覆盖常规民用邮箱场景，可以进一步简化正则，比如用/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/，既可以满足绝大多数使用需求，执行效率也更高。
• 校验前先做长度判断：按照RFC规范，邮箱总长度不得超过254位，用户名部分不得超过64位，不符合长度要求直接返回校验失败，也可以避免长字符串触发回溯问题。
• 通用校验规则优先选择框架自带校验器或业界广泛验证过的正则表达式，避免自行手写复杂正则时踩回溯的坑。

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