使用JavaScript正则表达式在keyup事件中为输入框添加/分隔符遇bug求助

你的问题主要出在两个关键点上：一是没先清除输入里已有的非数字字符（比如之前添加的“/”），导致每次keyup触发时，都会对带分隔符的字符串重复应用正则；二是原正则的匹配逻辑是从右往左每两位插入分隔符，在实时输入的过程中会提前触发不必要的分隔，最终出现不符合预期的结果。

我们可以通过以下两步修复这个Bug：

1. 先过滤非数字字符：确保每次处理的都是纯数字字符串，避免重复添加分隔符；
2. 调整正则匹配逻辑：改为从左往右每两位数字后插入“/”，让实时输入的中间结果也符合预期。

修复后的基础版本代码 #

$('#validUntil').on('keyup', function(e){ 
  $(this).val(function(index, value) {
    // 第一步：移除所有非数字字符，得到纯数字字符串
    const pureNumber = value.replace(/\D/g, '');
    // 第二步：从左往右每两位数字后添加“/”
    return pureNumber.replace(/(\d{2})(?=\d)/g, '$1/');
  }); 
});

效果验证 #

• 输入5 → 显示5
• 输入51 → 显示51
• 输入512 → 显示51/2
• 输入5121 → 显示51/21（完全符合你的预期）
• 继续输入更多数字，比如512134 → 显示51/21/34

如果是固定4位数字的场景（比如MM/DD格式） #

如果你的需求是最多只保留4位数字并分成两组，可以再加上长度截断，同时避免末尾出现多余的“/”：

$('#validUntil').on('keyup', function(e){ 
  $(this).val(function(index, value) {
    const pureNumber = value.replace(/\D/g, '').slice(0, 4); // 最多保留4位数字
    // 匹配前两位和后两位，插入分隔符，同时移除可能的末尾“/”
    return pureNumber.replace(/^(\d{2})(\d{2})?$/, '$1/$2').replace(/\/$/, '');
  }); 
});

内容的提问来源于stack exchange，提问作者Rendi Hasan Nugraha