Next.js(TypeScript)中\p{Script=Han}正则过滤中文报错的解决咨询

原因 #

代码在在线环境正常但Next.js项目报错，核心是Babel转译正则时的Unicode属性支持问题：

• 在线JS环境（如JSFiddle）直接调用浏览器原生JS引擎，现代浏览器已完全支持\p{Script=Han}这类Unicode属性转义语法。
• Next.js默认通过Babel处理TS/JS代码，你项目中依赖的Babel版本（或Next内置的Babel包）的Unicode属性数据库未包含Han脚本属性的定义，导致解析正则表达式时抛出识别错误。

解决方法 #

方法1：配置Babel支持Unicode属性正则 #

安装并启用对应Babel插件，让Babel能正确解析\p{Script=Han}：

1. 安装插件：

   npm install @babel/plugin-proposal-unicode-property-regex --save-dev
   

2. 在项目根目录创建/修改babel.config.js：

   module.exports = {
     presets: ['next/babel'],
     plugins: ['@babel/plugin-proposal-unicode-property-regex']
   };
   

   该插件会补充Babel的Unicode属性识别能力，转译后代码可正常运行。

方法2：使用Unicode范围直接匹配中文字符 #

如果不想调整Babel配置，可以直接用汉字的Unicode范围替代\p{Script=Han}，效果一致且无需额外插件：

// 覆盖常用汉字（含简体、繁体及扩展生僻字）
const nonChinese = /[^\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF]/gimu;
const text = "asdP asfasf这些年asfagg 我开源的 几个小项目sad asd";
console.log(text.replace(nonChinese, ""));

这个正则覆盖的范围包括：

• \u4E00-\u9FFF：通用规范汉字区
• \u3400-\u4DBF：扩展A区生僻汉字
• \uF900-\uFAFF：兼容异体汉字区

方法3：禁用Babel对正则的转译（应急方案） #

通过Next.js的Babel配置关闭正则转译逻辑，让浏览器原生处理\p{Script=Han}：

// babel.config.js
module.exports = {
  presets: [
    ['next/babel', {
      'preset-env': {
        regexp: false
      }
    }]
  ]
};

注意：此方法依赖浏览器对Unicode属性转义的支持，需确保目标用户使用现代浏览器（Chrome 64+/Firefox 78+/Safari 11.1+均已支持）。

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