Ant Design - 带逗号小数分隔符的货币输入答案

【问题标题】：Ant Design - Currency Input with comma decimal separatorAnt Design - 带逗号小数分隔符的货币输入
【发布时间】：2020-12-03 21:29:59
【问题描述】：

我想使用 Antd 的 <InputNumber /> 组件作为货币输入，我正在使用官方文档建议的那样：

<InputNumber
    min={0}
    size="large"
    style={{ width: 400 }}
    formatter={value => `$ ${value}`.replace(new RegExp(/\B(?=(\d{3})+(?!\d))/g), ',')}
    parser={value => value.replace(new RegExp(/\$\s?|(,*)/g), '')}
/>

但我希望我可以使用逗号数字作为小数分隔符：R$ 17.350,70

输入我的货币信息的正确正则表达式格式和解析器是什么？

【问题讨论】：

你的意思是123456789要转换成1.234.567,89吗？
这正是我想要的！
@HudsonMedeiros 我也有同样的问题。你设法解决了吗？
@GiuliaLage 仍在寻找解决方法
我回答了这个问题，但有些人删除了，我只是想帮助使用输入而不是输入数字和一些依赖项的替代解决方案......如果想再看看stackoverflow.com/questions/63430864/…

标签： javascript reactjs regex antd

【解决方案1】：

如果 JavaScript RegExp 有一个向后标志，这会更简洁。既然没有，我们必须反转字符串，插入标点符号，然后将其反转。

解析只是简单地将所有非数字 \D 替换为空。

我更熟悉使用句点 . 作为小数，逗号 , 作为千位分隔符，但你应该很容易将其反转。

const numbers = [1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 123456789].map(String);

function format(number) {
  return number
    .split('').reverse().join('')
    .replace(/(\d{1,2})(\d{1,3})?(\d{1,3})?(\d{1,3})?/, '$1.$2,$3,$4')
    .split('').reverse().join('')
    .replace(/^,+/, '')
}

function parse(money) {
  return money.replace(/\D/g, '');
}

function log(n) {
  console.log(n);
}

numbers
  .map(format)
  .forEach(log);

【讨论】：