Safari正则表达式不兼容报错：无效组说明符名称，求解决方案

我用正则处理支付金额格式化，代码在Chrome、Firefox、Edge里正常运行，但Safari报错：SyntaxError: Invalid regular expression: invalid group specifier name。相关代码如下：

格式化金额的函数：

setAmount = (amount) => { 
  const value = amount ? amount.replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1.') : 0; 
  return value; 
}

同时用NumericFormat组件展示金额：

const nominal = formData.amount;

<Grid item xs={6}>
  <NumericFormat 
    className={classes.formControl}
    fullWidth
    thousandSeparator='.'
    color='primary'
    decimalSeparator=',' 
    prefix='Rp.'
    label='Amount'
    customInput={TextField}
    value={nominal}
    variant="outlined"
    disabled={true}
  />
</Grid>

作为正则新手，不清楚浏览器间的差异原因，求解决思路。

1. 报错根源：Safari不支持ES2018反向断言 #

你用的正则里的(?<!\..*)是负向后行断言，这个特性是ES2018才引入的，旧版本Safari（含部分macOS/iOS端Safari）未支持该语法，这就是报错的直接原因。

2. 替代方案：用兼容写法实现金额格式化 #

拆分字符串处理整数和小数部分，避免使用反向断言，所有主流浏览器（包括Safari）都支持这个写法：

setAmount = (amount) => {
  if (!amount) return 0;
  // 拆分整数与小数部分
  const [integerPart, decimalPart] = amount.split('.');
  // 给整数部分添加千分位分隔符（用.作为分隔符）
  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  // 拼接小数部分（若存在）
  return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;
}

3. 更优方案：复用NumericFormat组件的能力 #

你已经在使用NumericFormat组件，它本身就支持千分位、小数分隔符的配置，完全可以省去自定义正则的步骤：

• 直接将原始金额传给组件的value属性，组件会自动按你配置的规则（千分位用.、小数用,）格式化显示；
• 若需获取格式化后的字符串，可通过组件的onValueChange回调直接获取，无需额外处理。

这种方式既规避了正则兼容性问题，也减少了自定义代码的维护成本。

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