-1

I need a regular expression for adding a dot as a thousand and millon separator in Javascript. I've searched the whole web without finding the format I need. It would return this:

1
12
123
1.234
12.345
123.456
1.234.567
12.345.678
123.456.789

I'm trying to use it in an input.

  handleIdChange = (personalIdNumber) => {
this.validator.updateField("personalId", {
  number: personalIdNumber
})
this.props.setVisitorField({
  field: "personalId.number",
  value: personalIdNumber
});

            <CLTextInput
            highContrast={true}
            onChangeText={this.handleIdChange}
            keyboardType="numeric"
            placeholder="Número"
            returnKeyType="next"
            autoCapitalize="none"
            autoCorrect={false}
            value={visitor.personalId.number}
            error={this.shouldShowError("personalId")}
            accessibility
            />
Amadeo de la Peña
  • 51
  • 7
  • 1
    ... or https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript, lots of solutions out there – user3783243 May 11 '22 at 13:46
  • 1
    Take any of the good answers from the duplicate, and just use dot as the replacement instead of comma. – Tim Biegeleisen May 11 '22 at 13:46
  • 1
    There's also the option of not using regex, and going with [Number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) – James May 11 '22 at 13:49
  • none of those answers worked for me. They return 1.1.123, 1.1.1.123 and so on. – Amadeo de la Peña May 11 '22 at 13:54
  • 1
    If you insist on using a regex for this, this should work: `"123456789".replace(/(.)(?=(.{3})+$)/g, "$1.")` – Jay May 11 '22 at 13:55
  • The one Jay proposed returns 4..6.5.435 – Amadeo de la Peña May 11 '22 at 13:56
  • Are you sure you're using javascript and keeping the expression as it is? My expression works perfectly for me and since it dictates that a "character must be followed by a multiple of 3 characters until the end" to be considered a match... I see no way how it could output "4..6.5.435" in any scenario. What was your input? Maybe it had . characters already in it? – Jay May 11 '22 at 14:00
  • I'm trying to use it in an input. Just added more details to the question – Amadeo de la Peña May 11 '22 at 14:05
  • @AmadeodelaPeña I think the problem is that you are running the regex in a CHANGE handler so the Regex replacement triggers another Regex replacement. Make sure to remove existing dots before! basically `.replace(/\./g,'').replace(/(.)(?=(.{3})+$)/g, "$1.")` – Jay May 11 '22 at 14:06
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/244666/discussion-between-amadeo-de-la-pena-and-jay). – Amadeo de la Peña May 11 '22 at 14:10

1 Answers1

1

Don't use regular expressions to format numbers. Use a proper number formatter.

If you want german-style number formatting, set that as the locale.

const formatter = new Intl.NumberFormat('de-DE');
for (let i = 0; i < 10; i++) {
    const number = 10 ** i;
    console.log(formatter.format(number));
}
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • This returns NaN when used in a handleChange in an input :/ – Amadeo de la Peña May 11 '22 at 13:59
  • @AmadeodelaPeña — Perhaps you are feeding it a string and you need to use `parseInt` first. – Quentin May 11 '22 at 14:02
  • I'm pretty sure he's writing it back to the input, which triggers another "handleChange" and now the already formatted value with dots, which is NaN is fed to the formatter. – Jay May 11 '22 at 14:13