如何调整文本输入框值适配货币格式 解决欧区逗号转点输入需求

原代码触发Sonar拒绝服务告警的核心原因是使用的千分位匹配正则存在嵌套量词，极端长输入场景下会触发大量正则回溯，导致JS线程阻塞，也就是常说的正则拒绝服务（ReDoS）问题，同时多步replace和数组操作逻辑冗余，可直接简化为以下实现：

export const onChangeCustomInput = (e) => {
  // 预处理：逗号统一转点，过滤所有非数字、非点的无效字符
  let rawVal = e.target.value.replace(/,/g, '.').replace(/[^\d.]/g, '')

  // 处理多小数点场景，限制小数位最多2位
  const firstDotIndex = rawVal.indexOf('.')
  if (firstDotIndex !== -1) {
    const integerPart = rawVal.slice(0, firstDotIndex)
    // 移除小数部分多余的小数点，最多保留两位
    const decimalPart = rawVal.slice(firstDotIndex + 1).replace(/\./g, '').slice(0, 2)
    rawVal = decimalPart ? `${integerPart}.${decimalPart}` : integerPart
  }

  // 可选：添加千分位空格，不需要可直接删除以下4行
  const [integer, decimal] = rawVal.split('.')
  const formattedInteger = integer.replace(/\B(?=(\d{3})+$)/g, ' ')
  const finalVal = decimal ? `${formattedInteger}.${decimal}` : formattedInteger
  e.target.value = finalVal

  // 如果不需要千分位，直接赋值 e.target.value = rawVal 即可
}

逻辑说明 #

• 完全覆盖需求：自动转换欧洲地区常用的逗号小数分隔符为点，仅允许输入数字，最多保留1个小数点、小数位最多2位
• 规避了ReDoS风险：提前过滤所有无效字符后再做正则匹配，输入长度和字符范围完全可控，不会触发正则回溯漏洞
• 逻辑精简可扩展：如果不需要千分位展示，直接删除对应代码块即可，维护成本更低

后端传值处理 #

提交数据时，只需移除输入值中的所有空格即可获得后端要求的标准格式：

const backendValue = e.target.value.replace(/\s/g, '')

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