I want to use Antd's <InputNumber /> ponent as monetary input, and I'm using like official documentation suggests:

<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), '')}
/>

But I wish I could using ma digit like a decimal separator: R$ 17.350,70

What is the correct regex format and parser for input my currency information?

I want to use Antd's <InputNumber /> ponent as monetary input, and I'm using like official documentation suggests:

<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), '')}
/>

But I wish I could using ma digit like a decimal separator: R$ 17.350,70

What is the correct regex format and parser for input my currency information?

• javascript
• reactjs
• regex
• antd

Share Improve this question Follow edited Nov 1, 2020 at 1:20 Kaspar Lee 5,59655 gold badges3333 silver badges5454 bronze badges asked Aug 14, 2020 at 1:17 Hudson MedeirosHudson Medeiros 33111 gold badge66 silver badges1414 bronze badges 5

• 1 Do you mean that 123456789 should be converted to 1.234.567,89? – JayCodist Commented Aug 15, 2020 at 11:21
• Thats exactly what i want! – Hudson Medeiros Commented Aug 15, 2020 at 12:38
• @HudsonMedeiros I'm with the same issue.. you managed to fix it ? – Giulia Lage Commented Aug 15, 2020 at 21:22
• @GiuliaLage Still looking for workarounds – Hudson Medeiros Commented Aug 16, 2020 at 14:36
• I answered the question but some guy deleted, I just wanted to help with a alternative solution using Input instead of input Number and some dependencies... if wanna take a look again stackoverflow./questions/63430864/… – Giulia Lage Commented Aug 16, 2020 at 19:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

This would be more concise if JavaScript RegExp had a backwards flag. Since it doesn't, we have to reverse the string, insert the punctuation, then reverse it back.

Parsing is simply replacing all non-numbers, \D, with nothing.

I am more familiar with using the period . as a decimal, and mas , as thousands separators, but it should be easy for you to invert this.

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);

I know it's already late for the main questioner, but since it took me quite a considerable amount of time to figure it out so I want to provide my formatter-function in case someone is still looking for a clean solution to format input numbers to currency (with thousand separators and two digits decimal places)

const formatNumberWithThousandSeparatorAndTwoDecimalPlaces = value => new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
}).format(value).replace(/€/g, '');

called like:

 formatter={formatNumberWithThousandSeparatorAndTwoDecimalPlaces}

the above function turns a 123456 to 123.456,00 and a 123456.78 to 123.456,78 You also need to set the following property

 decimalSeparator = {','}

*Feel free to change the decimal separator or the locale/Currency type! *You need also a parser if you want to parse the input to a desired formatted number: something like:

 parser={value => value.replace('.', '').replace(/,/g, '.')} 

so you have a 123456.78 from a 123.456,78.

*You can leave the .format(value).replace(/€/g, '') part if you want to keep the currency symbol but later you have to add this to the parser function