使用可空正则捕获组格式化手机号的异常问题求助

我正在做用户输入时的手机号格式化，快完成了但总有问题。

预期格式化效果 #

+12345678900 --> +1 (234) 567 89-00
+1234567890  --> +1 (234) 567 89-0
+123456789   --> +1 (234) 567 89-
+12345       --> +1 (234) 5
+123         --> +1 (23

现有实现代码 #

'+12345678900'
    .replace(
        /^(\+\d{1})?(\d{1,3})?(\d{1,3})?(\d{1,2})?(\d{1,2})?$/,
        "$1 ($2) $3 $4-$5"
    ); // +1 (234) 567 89-00 ✔️

失效场景 #

这个方法对完整手机号有效，但部分输入会出错：

+12345678 // 预期结果 '+1 (234) 567 8', 实际得到 '+1 (234) 567 8-'
+1234567  // 预期结果 '+1 (234) 567',   实际得到 '+1 (234) 567 -'
+123      // 预期结果 '+1 (23',         实际得到 '+1 (23)  -'

请问我忽略了什么问题？

你的正则表达式把所有分组都设为可选，但替换模板里直接写死了括号、空格和连字符。哪怕某个分组没匹配到内容，对应的分隔符还是会保留，这就是多余符号出现的原因。比如当$5为空时，$4-$5就会变成$4-；当$4和$5都为空时，就会变成 -。

要解决这个问题，得让分隔符只在对应的分组有内容时才出现，下面提供两种可行思路：

思路1：分段拼接结果 #

先提取有效字符，再根据各段是否有内容逐步拼接格式符号：

function formatPhone(phone) {
  // 过滤掉非数字和非开头+的字符
  const cleaned = phone.replace(/[^\d+]/g, '');
  // 按规则拆分各段
  const [_, prefix, seg1, seg2, seg3, seg4] = cleaned.match(/^(\+\d)?(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})$/);
  
  let result = prefix || '';
  // 处理第一段括号
  if (seg1) {
    result += ` (${seg1}`;
    // 有第二段就补右括号加空格
    if (seg2) {
      result += `) ${seg2}`;
      // 有第三段加空格
      if (seg3) {
        result += ` ${seg3}`;
        // 有第四段加连字符
        if (seg4) result += `-${seg4}`;
      }
    }
  }
  return result;
}

测试验证：

• formatPhone('+12345678') → +1 (234) 567 8 ✔️
• formatPhone('+1234567') → +1 (234) 567 ✔️
• formatPhone('+123') → +1 (23 ✔️
• formatPhone('+12345678900') → +1 (234) 567 89-00 ✔️

思路2：带条件的正则替换 #

利用正则正向预查，只在后续有数字时插入对应分隔符：

function formatPhone(phone) {
  return phone.replace(/[^\d+]/g, '')
    // 前缀后有数字时加左括号
    .replace(/^(\+\d)(?=\d)/, '$1 (')
    // 第一段3位数字后有数字时加右括号和空格
    .replace(/(?<=\+\d\(\d{3}))(?=\d)/, ') ')
    // 第二段3位数字后有数字时加空格
    .replace(/(?<=\+\d\(\d{3}\) \d{3}))(?=\d)/, ' ')
    // 第三段2位数字后有数字时加连字符
    .replace(/(?<=\+\d\(\d{3}\) \d{3} \d{2}))(?=\d)/, '-');
}

这个方法先清理无效字符，再依次在符合条件的位置插入格式符号，从根源避免了多余分隔符的出现。

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