JavaScript卡号输入框4位分组格式化后删除异常的修复咨询

原代码的问题分析 #

原代码 input.value = input.value.replace(/\d{4}/g, "$& "); 存在两个核心问题：

1. 正则会匹配所有连续4位数字，包括已经分组后的数字段（比如输入第5位时，前4位会被加空格，同时第2-5位也会被匹配加空格，导致格式混乱）；
2. 每次替换都会在匹配到的数字后加空格，最终输入框末尾会出现多余空格，且替换后光标会强制跳到输入框末尾，导致用户在中间位置退格时，光标被拉回末尾，无法正常删除内容。

修复方案 #

需要同时处理格式生成逻辑和光标位置维护，确保格式化后输入、删除操作都符合预期：

完整代码实现 #

// 绑定输入框的input事件
const cardInput = document.querySelector('input[type="text"]');
cardInput.addEventListener('input', function(e) {
  // 保存当前光标位置
  const cursorPos = this.selectionStart;
  // 过滤所有非数字字符，得到纯数字内容
  const rawNumbers = this.value.replace(/\D/g, '');
  // 每4位数字分组，仅在后续还有数字时添加空格（避免末尾多余空格）
  const formatted = rawNumbers.replace(/(\d{4})(?=\d)/g, '$1 ');
  
  // 计算光标位置偏移：原光标位置前后的空格数量变化
  const oldSpacesCount = (this.value.slice(0, cursorPos).match(/\s/g) || []).length;
  const newSpacesCount = (formatted.slice(0, cursorPos).match(/\s/g) || []).length;
  const adjustedCursorPos = cursorPos + (newSpacesCount - oldSpacesCount);
  
  // 更新输入框值
  this.value = formatted;
  // 重置光标位置，避免跳到末尾
  this.setSelectionRange(adjustedCursorPos, adjustedCursorPos);
});

代码说明 #

• 过滤非数字：用 replace(/\D/g, '') 清除所有非数字字符，确保输入内容仅包含卡号数字；
• 合理分组：正则 /(\d{4})(?=\d)/g 使用正向预查 (?=\d)，仅当当前4位数字后还有其他数字时才添加空格，避免末尾出现多余空格；
• 维护光标位置：记录替换前的光标位置，计算替换前后空格数量的变化，调整光标到正确位置，解决退格时光标乱跑的问题。

测试验证 #

• 输入数字时，每4位自动添加空格，末尾无多余空格；
• 在任意位置按下退格键，可正常删除数字或空格，光标位置保持在操作位置；
• 中间插入或修改数字时，格式会自动调整，光标位置不受影响。

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