React文件名验证正则在Mac OS X失效，疑与编码相关？

问题根源 #

Mac OS X默认采用Unicode NFD（规范分解）存储文件名，而Windows用的是NFC（规范合成）。比如字符ż，在Windows里是单个预合成Unicode字符，在Mac里会被拆成z加上独立的变音符号̇。你原来的正则只写了预合成的波兰字符，自然匹配不了Mac上的分解形式。

解决方案 #

直接用Unicode属性转义来匹配所有Unicode字母，不管是合成还是分解形式，一步解决跨系统问题：

修改正则表达式，添加u（Unicode模式）标志，并用\p{L}替代手动枚举的波兰字符：

const validCharsRegex = /^([\p{L}\s()+[\]-]+)(\.[A-Za-z0-9]+)?$/u;

if (!validCharsRegex.test(file.name)) {
    errorLabels.push(translate(labels.forbiddenCharacters));
}

说明 #

• \p{L}是Unicode属性类，代表所有Unicode字母，包含带变音符号的波兰语字符（不管是合成还是分解形式），覆盖你需要的żźćńółęąśŻŹĆĄŚĘŁÓŃ等所有字符。
• u标志必须加上，否则JavaScript正则无法识别Unicode属性转义。
• React项目只要配置了支持ES2018+的Babel（现在大部分项目默认都支持），就能正常使用这个写法。

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