JavaScript输入格式化问题：如何允许并保留开头输入的0

嘿，这个问题我太熟悉了！你遇到的核心问题是原代码在处理匹配结果时，没有正确保留第一组的前导0（或者说拼接逻辑没处理好字符串的完整性）。咱们直接来看修改后的代码，再拆解原因：

document.getElementById('others_textb').addEventListener('input', function (e) {
  // 第一步：过滤掉所有非数字字符，得到纯数字字符串（前导0会被完整保留）
  const rawDigits = e.target.value.replace(/\D/g, '');
  
  // 第二步：用正则分组捕获三部分：最多6位、最多2位、最多4位
  // ^和$确保整个字符串都被匹配，避免分组混乱
  const groups = rawDigits.match(/^(\d{0,6})(\d{0,2})(\d{0,4})$/);
  
  if (groups) {
    const formattedParts = [];
    // 第一组（前6位）只要有内容就加入，哪怕是全0
    if (groups[1]) formattedParts.push(groups[1]);
    // 第二组（中间2位）有内容时，前面加分隔符再加入
    if (groups[2]) formattedParts.push(groups[2]);
    // 第三组（最后4位）同理
    if (groups[3]) formattedParts.push(groups[3]);
    
    // 用分隔符连接各部分，前导0会完整保留在第一组里
    e.target.value = formattedParts.join('-');
  }
});

为什么原代码会丢失前导0？ #

原代码的正则匹配逻辑其实没问题，但大概率是在拼接结果时，不小心把字符串当成数字处理了（比如用了+运算符隐式转换），或者拼接逻辑忽略了空分组的情况。而上面的代码全程用字符串处理：

• replace(/\D/g, '')得到的是纯数字字符串，前导0不会被自动删除
• match返回的分组结果也是字符串，groups[1]会完整保留你输入的前导0（比如输入000319，groups[1]就是"000319"）
• 最后用join('-')拼接，完全保留各部分的字符串内容

测试验证 #

• 输入000319192939 → 输出000319-19-2939（前导0完整保留）
• 输入000000 → 输出000000
• 输入0001234 → 输出000123-4（符合第7位加分隔符的需求）
• 输入abc000123 → 自动过滤非数字，输出000123

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