JS 金额正则表达式

在前端开发中，经常会涉及到对用户输入金额的校验和格式化，而正则表达式则是常用的一种方式。本文将会介绍JS中如何使用正则表达式校验和格式化金额输入。

校验金额

目标

校验金额是否符合以下规则：

• 必须为正数
• 只能含有一个小数点
• 小数点后最多两位数

实现

先来看一下JS中如何使用正则表达式：

const regex = /正则表达式/  // 创建正则表达式
const result = regex.test('字符串')  // 测试字符串是否匹配正则表达式

根据目标规则，可以得出以下正则表达式：

const regex = /^\d+(\.\d{1,2})?$/

解释一下：

• ^ 开始符号，表示匹配必须从字符串的前面开始
• \d+ 匹配数字字符，+ 表示至少匹配一次
• (\.\d{1,2})? 匹配小数部分，() 表示这部分可有可无，\. 表示匹配小数点，\d{1,2} 表示小数点后最多两位数字
• $ 结束符号，表示匹配必须到字符串的末尾

代码实现：

function validateAmount(amount) {
  const regex = /^\d+(\.\d{1,2})?$/
  return regex.test(amount)
}

console.log(validateAmount('500.23')) // true
console.log(validateAmount('5000')) // true
console.log(validateAmount('5000.235')) // false
console.log(validateAmount('-500.23')) // false

格式化金额

目标

将输入的金额格式化为每三位逗号分隔，小数点后最多两位

实现

思路：将整数部分和小数部分拆分，分别添加逗号和小数点。

function formatAmount(amount) {
  const [integerPart, decimalPart = ''] = amount.split('.')  // 拆分为整数部分和小数部分
  const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')  // 正则表达式添加逗号分隔符
  const formattedDecimalPart = decimalPart.length > 0 ? `.{decimalPart.slice(0, 2)}` : ''  // 小数部分最多保留两位
  return `{formattedIntegerPart}${formattedDecimalPart}`
}

console.log(formatAmount('500.23')) // 500.23
console.log(formatAmount('5000.235')) // 5,000.23
console.log(formatAmount('-5000.235')) // -5,000.23
console.log(formatAmount('100000000000')) // 100,000,000,000

正则表达式的部分解释：

• \B: 表示匹配非单词边界，即不在头或尾，避免类似 .4 或 0.4 前面重复添加逗号
• (?=(\d{3})+(?!\d)): 表示正向预查，匹配后面必须跟三个数字，且不能再跟数字，避免类似 1,000,000,0 的情况

结论

本文中介绍了如何使用正则表达式校验和格式化金额输入，关于金额输入还可以考虑使用第三方库或API，以达到更好的体验和安全性。