如何使用正则表达式为数字插入短横线 适配input实时输入需求

核心实现逻辑 #

通过两次字符串处理完成实时格式化：先过滤非法非数字字符，再通过正则分组按规则插入短横线，全程适配任意输入长度场景。

完整代码实现 #

// 绑定input元素的input事件
const numberInput = document.querySelector('input')
numberInput.addEventListener('input', function(e) {
  // 1. 过滤所有非数字内容，限制最大输入长度为12位
  let pureNumber = e.target.value.replace(/\D/g, '').slice(0, 12)
  // 2. 按规则插入短横线
  let formattedVal = pureNumber.replace(/^(\d{3})(\d{0,4})(\d{0,5})$/, (_, group1, group2, group3) => {
    let result = group1
    if (group2) result += `-${group2}`
    if (group3) result += `-${group3}`
    return result
  })
  // 3. 赋值回输入框
  e.target.value = formattedVal
})

匹配规则验证 #

所有场景完全符合需求：

• 输入长度≤3：仅返回第一组捕获内容，无短横线，如输入123返回123
• 3<输入长度≤7：拼接前3位、短横线、第二组内容，如输入1231返回123-1，输入1231234返回123-1234
• 输入长度>7：按三段拼接，如输入12312341返回123-1234-1，输入满12位123123412345返回123-1234-12345

优化提示 #

如果需要解决编辑时光标自动跳转到末尾的问题，可以在处理值之前记录当前光标位置，格式化完成后手动复位光标即可。

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