求满足指定规则的JS正则表达式实现输入时间动态替换

首先说明：纯正则无法独立满足你的全部需求，正则仅能做字符串格式校验，数值计算、四舍五入、超出范围替换这类逻辑需要搭配JS事件处理实现，完整实现如下：

修正后的合法值匹配正则 #

// 匹配0~24区间内、最多2位小数的数值字符串，用于后续逻辑判断
const reg = /^(0|[1-9]|1\d|2[0-3])(\.\d{1,2})?$|^24(\.0{0,2})?$/

完整输入框处理逻辑 #

直接绑定到输入框的input事件即可实现实时自动修正：

const handleNumberInput = (e) => {
  let value = e.target.value
  // 1. 过滤所有非数字、非小数点的非法字符
  value = value.replace(/[^\d.]/g, '')
  // 2. 处理多个小数点，仅保留第一个，且小数点后最多留2位用于四舍五入
  const firstDotPos = value.indexOf('.')
  if (firstDotPos > -1) {
    value = value.slice(0, firstDotPos + 1) + value.slice(firstDotPos + 1).replace(/\./g, '').slice(0,2)
  }
  // 空值直接返回不处理
  if (!value) {
    e.target.value = ''
    return
  }
  // 3. 数值范围判断+四舍五入处理
  const num = Number(value)
  if (num >= 24) {
    e.target.value = '24'
    return
  }
  // 四舍五入保留1位小数
  const fixedNum = Math.round(num * 10) / 10
  e.target.value = fixedNum.toString()
}

// 绑定到对应输入框
document.querySelector('#target-input').addEventListener('input', handleNumberInput)

逻辑说明 #

• 自动过滤所有字母、符号等非法输入，仅保留数字和小数点
• 自动处理多小数点、小数位过长的问题
• 数值大于等于24时自动替换为24
• 自动对两位小数的输入做四舍五入，最终仅保留1位小数

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