Getting NaN in text input field that accepts comma separated numbers

Question

I have a text input field that should accept numbers only and show them with comma separators (I am using regex to achieve this). However, I have the following issues:

When entering a number, upon erasing the number, I get NaN
When entering letters instead of numbers I get NaN
When entering a large number (16 charachters number), every subsequent number entered is shown as 0 (for example, when I enter this number 4,543,543,555,555,555 if I add any number, I get 4,543,543,555,555,5550, if I add more numbers I get 4,543,543,555,555,5550000, etc).

Side note: After I get the number with commas (string) I am converting it to a number and I am assigning it to the expenses variable I hold in my state

Here is my code:

    expensesValueInput.addEventListener('keyup', (event) => {
      const currentValue = (event.target.value).replace(/\,/g, '')
      const newValue = Number.parseInt(currentValue, 10).toLocaleString()
      event.target.value = newValue
      const newValueToNum = parseFloat(newValue.replace(/,/g, ''))
      state.expenses = newValueToNum
    })

Does this answer your question? [Comma Separated Numbers Regex](https://stackoverflow.com/questions/16620980/comma-separated-numbers-regex) — Lochyj, Nov 03 '22 at 11:40
`NaN` means that `parseInt()` was not given a valid numeric string to parse. Your code can check for that condition with `isNaN()` before updating the field value. — Pointy, Nov 03 '22 at 11:42
This should answer number 3 - https://stackoverflow.com/questions/307179/what-is-javascripts-highest-integer-value-that-a-number-can-go-to-without-losin — Dmitry, Nov 03 '22 at 11:57

score 0 · Answer 1 · answered Nov 03 '22 at 19:22

The parseInt() function has a limit on number range, hence the trailing 0s for big numbers. Use BigInt() instead. Test with various number sizes with and without commas:

[
  '',
  '1',
  '12',
  '123',
  '1234',
  '12345',
  '123456',
  '1234567',
  '12345678',
  '123456789',
  '1234567890',
  '12345678901',
  '123456789012',
  '1234567890123',
  '12345678901234',
  '123456789012345',
  '1234567890123456',
  '12345678901234567',
  '123456789012345678',
  '1234567890123456789',
  '11,222,333,444,555,666'  // with commas
].forEach(value => {
  let newValue = value.replace(/,/g, '');
  newValue = BigInt(newValue).toLocaleString();
  if(newValue === '0') {
    newValue = '';
  }
  console.log(value + ' => ' + newValue);
});

Output:

 => 
1 => 1
12 => 12
123 => 123
1234 => 1,234
12345 => 12,345
123456 => 123,456
1234567 => 1,234,567
12345678 => 12,345,678
123456789 => 123,456,789
1234567890 => 1,234,567,890
12345678901 => 12,345,678,901
123456789012 => 123,456,789,012
1234567890123 => 1,234,567,890,123
12345678901234 => 12,345,678,901,234
123456789012345 => 123,456,789,012,345
1234567890123456 => 1,234,567,890,123,456
12345678901234567 => 12,345,678,901,234,567
123456789012345678 => 123,456,789,012,345,678
1234567890123456789 => 1,234,567,890,123,456,789
11,222,333,444,555,666 => 11,222,333,444,555,666

Getting NaN in text input field that accepts comma separated numbers

1 Answers1