如何通过正则与replace函数实现JS输入框值自动格式化？

你的代码问题在于：正则是匹配完整的合法时间格式，然后把匹配到的内容替换成空字符串——这完全搞反了逻辑，只有输入完全符合正则时会被清空，不符合的话replace不生效，自然返回原始字符串。

要实现输入时自动格式化时间（比如转成HH:MM格式，同时限制小时0-23、分钟0-59），可以按以下步骤来做：

核心思路 #

1. 先过滤掉所有非数字字符，只保留用户输入的数字
2. 限制输入长度最多4位（对应HHMM的格式）
3. 通过正则分组捕获小时、分钟部分，校验合法性后自动补零并插入冒号

完整代码实现 #

<input type="text" id="time-input" placeholder="输入时间（如1234）">

<script>
function formatTimeInput(value) {
  // 第一步：移除所有非数字字符
  let cleaned = value.replace(/\D/g, '');
  
  // 限制最多输入4位数字（HHMM）
  if (cleaned.length > 4) {
    cleaned = cleaned.slice(0, 4);
  }
  
  // 第二步：格式化并校验合法性
  let formatted = cleaned.replace(/^(\d{1,2})(\d{0,2})$/, (match, hhPart, mmPart) => {
    // 处理小时：不能超过23
    let validHH = hhPart;
    if (parseInt(validHH) > 23) {
      validHH = '23';
      // 把小时部分超出的数字转到分钟里
      mmPart = hhPart.slice(2) + mmPart;
    }
    validHH = validHH.padStart(2, '0'); // 补零成两位，比如"9"→"09"
    
    // 处理分钟：不能超过59，且最多两位
    let validMM = mmPart.slice(0, 2);
    if (parseInt(validMM) > 59) {
      validMM = '59';
    }
    validMM = validMM.padStart(2, '0');
    
    // 拼接结果：如果有分钟就加冒号，没有就只显示小时
    return validMM ? `${validHH}:${validMM}` : validHH;
  });
  
  return formatted;
}

// 绑定输入事件，实时格式化
document.getElementById('time-input').addEventListener('input', function(e) {
  this.value = formatTimeInput(this.value);
});
</script>

代码说明 #

• replace(/\D/g, '')：彻底清除非数字字符，避免用户输入字母、标点等干扰内容
• 正则/^(\d{1,2})(\d{0,2})$/：把输入的数字分成小时（前1-2位）和分钟（后0-2位）两组
• 回调函数里做合法性校验：小时超过23就强制设为23，分钟超过59就强制设为59，同时自动补零保证两位格式
• 输入事件监听：用户每输入一个字符就触发格式化，实时更新输入框内容

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