PCRE(PHP)正则转ECMAScript(JS)用于React JSON校验

转换关键点 #

由于JavaScript正则不支持PCRE的(?(DEFINE))子模式定义和(?&name)递归引用语法，需做以下调整：

• 移除(?(DEFINE))块，将所有子模式直接整合为命名捕获组
• 把PCRE的递归引用(?&name)替换为JS支持的\k<name>
• 将PCRE的字符串锚点\A和\z替换为JS的^和$，确保匹配整个输入字符串
• 移除PCRE特有的原子组(?>...)，替换为JS支持的非捕获组(?:...)
• 修正转义字符：将PCRE中的"替换为"，并确保/等特殊字符正确转义
• 添加u标志，支持Unicode字符（适配JSON的\uXXXX转义序列）

转换后的JavaScript正则 #

const jsonValidationRegex = /^(?<json>\s*(?<object>\{\s*(?:(?<pair>(?<STRING>"(?:\\(?:["\\\/bfnrt]|u[a-fA-F0-9]{4})|[^"\\\0-\x1F\x7F]+)*")\s*:\s*(?<value>true|false|null|\k<STRING>|(?<NUMBER>-?(?:0|[1-9][0-9]*)(?:\.[0-9]+)?(?:[eE][+-]?[0-9]+)?|\k<object>|\k<array>)))(?:\s*,\s*\k<pair>)*)?\s*\})\s*|\s*(?<array>\[\s*(?:\k<value>(?:\s*,\s*\k<value>)*)?\s*\])\s*)$/u;

React场景使用建议 #

正则验证JSON可以覆盖绝大多数场景，但原生JSON.parse对边缘情况的处理更准确，建议结合两者使用：

// 表单校验函数
const validateJsonInput = (inputValue) => {
  if (!inputValue.trim()) {
    return '请输入JSON内容';
  }
  try {
    JSON.parse(inputValue);
    return true;
  } catch (err) {
    if (!jsonValidationRegex.test(inputValue)) {
      return '输入内容不是合法的JSON格式';
    }
    // 极端边缘情况，理论上不会走到这里
    return '输入内容格式异常，请检查';
  }
};

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