为何正则在RegExp u flag下有效，v flag及HTML pattern属性中无效？

错误原因分析 #

1. v flag下的语法错误：
   你的正则字符类[a-zA-Z0-9+_.-]中，.-的写法在v flag（严格Unicode模式）下会被解析为无效的字符范围。ASCII码中，.的编码是46，-是45，起始字符的编码值大于结束字符，这种反向范围在v flag的严格校验下会直接抛出“字符类中无效字符”的错误。而u flag（宽松Unicode模式）对这类无效范围的校验更宽松，不会报错，但实际逻辑已存在隐患。

2. HTML pattern属性失效：
   HTML的pattern属性默认规则与JavaScript的u flag行为类似，但部分浏览器对字符类中的无效范围兼容性差，加上pattern属性对正则解析的严格要求，上述无效范围会导致浏览器无法正确识别正则逻辑，最终失效。

修复方案 #

核心是避免字符类中的无效范围，两种可靠修改方式：

方式1：将连字符移到字符类首尾 #

连字符放在字符类的开头或结尾时，会被当作普通字符，不会被解析为范围标识符：

^[-a-zA-Z0-9+_.]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$

方式2：转义连字符 #

在字符类中给-添加转义符\，明确标记它为普通字符：

^[a-zA-Z0-9+_.\-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$

修改后的正则可在v flag下正常解析，同时兼容HTML的pattern属性。

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