蚂蚁设计-带逗号小数分隔符的货币输入

问题描述

我想使用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

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

解决方法

如果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})?/,'$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);