Javascript/React正则报错：IDENTITY_REGEX字符类无效

问题原因 #

报错信息显示正则表达式被解析为/[A-Za-z0-9]{3,16}|[w.-]+@([w-]+.)+[w-]{2,4}/v，核心问题是JavaScript字符串中的反斜杠未转义：

• 在JS字符串中，\是转义字符，\w会被直接解析为普通字符w，\.会被解析为普通字符.
• 这导致字符类[w.-]中的-被当作范围运算符（表示从w到.的字符范围），但w的ASCII码大于.，该范围无效，触发「无效字符类」错误

修复方案 #

有两种可行的修复方式：

方案1：转义字符串中的所有反斜杠

将字符串中的单个\替换为\\，确保正则的特殊转义序列被正确识别：

export const USERNAME_REGEX = "[A-Za-z0-9]{3,16}"
export const EMAIL_REGEX = "[\\w\\.-]+@([\\w-]+\\.)+[\\w-]{2,4}"
export const IDENTITY_REGEX = "[A-Za-z0-9]{3,16}|[\\w\\.-]+@([\\w-]+\\.)+[\\w-]{2,4}"

方案2：使用正则字面量（推荐）

直接使用JavaScript正则字面量语法，无需额外转义反斜杠，代码更简洁直观：

export const USERNAME_REGEX = /[A-Za-z0-9]{3,16}/
export const EMAIL_REGEX = /[\w\.-]+@([\w-]+\.)+[\w-]{2,4}/
export const IDENTITY_REGEX = /[A-Za-z0-9]{3,16}|[\w\.-]+@([\w-]+\.)+[\w-]{2,4}/

关于new RegExp()的说明 #

如果使用new RegExp()构造函数，同样需要对反斜杠进行转义，示例如下：

export const IDENTITY_REGEX = new RegExp("[A-Za-z0-9]{3,16}|[\\w\\.-]+@([\\w-]+\\.)+[\\w-]{2,4}")

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