Add commas to larger numbers

Question

I have an input field, and with JavaScript and React, I'm restricting that field to only numbers:

HTML:

<input type="number" name="worth" id="worth-Valueofproperty-undefined-39916" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;">

JS:

validateValue(e) {
  return (
    e.target.value = e.target.value.replace(/[^0-9,.]/, '')
  );
}

This works great, but now I would like to add commas into the input to group hundreds, thousands, etc.

For example:

     1000 -> 1,000
   100000 -> 100,000
100000000 -> 100,000,000

How can I do this?

By "adding a [comma]", do you mean to convert something like "1000" to "1,000" and "10000000" to "10,000,000"? — Chris Forrence, May 11 '18 at 15:28
If @ChrisForrence is right, check this [page](https://stackoverflow.com/questions/38462619/convert-numbers-into-comma-separated-format-with-two-decimals-in-javascript). — Alexandre Beaudet, May 11 '18 at 15:31
thank you I tried this code but I don t manage to implement it, I have edit the html of my input in case that help ?? thank you for your help — tibewww, May 11 '18 at 15:35
Retrieve the value, use the "parseFloat"/"toLocaleString" and return it ! :) — Alexandre Beaudet, May 11 '18 at 15:36
Possible duplicate of [Convert numbers into comma separated format with two decimals in javascript](https://stackoverflow.com/questions/38462619/convert-numbers-into-comma-separated-format-with-two-decimals-in-javascript) — Alexandre Beaudet, May 11 '18 at 15:36
That doesn't really help, @tibewww, since it's still unclear what you're trying to do. Give an example: given a particular number, what do you expect back? — Chris Forrence, May 11 '18 at 15:38
sorry about that, If i have 150000, i would like it to be 150,000 no need any digit after that. If you need any other info let me know ? Thank s alot — tibewww, May 11 '18 at 15:39

Attersson · Accepted Answer · 2018-05-11T16:16:40.037

2

If you mean comma "," after the integer number,

var n = Number.parseInt(e.target.value);
return Number.isNaN(n) ? "0,": ""+Number.parseInt(n)+",";

If you mean you want to convert the number to float (having a point, sometimes comma) use Number.parseFloat(n).

If you mean you want to format the number with commas 1,000,000.12:

let num = Number(parseFloat(1000000.12).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
console.log(num)

Final code could be:

validateValue(e) {
  return (
    e.target.value = Number(parseFloat(e.target.value).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
  );
}

Or maybe (see comments below for discussion):

validateValue(e) {
  return (
    Number(parseFloat(e.target.value).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
  );
}

edited May 11 '18 at 16:16

answered May 11 '18 at 15:34

Attersson

4,755
1
15
29

thank you I tried this code but I don t manage to implement it, I have edit the html of my input in case that help ?? thank you for your help – tibewww May 11 '18 at 15:35
1

Glad to help, so what of the 3 cases did you mean? – Attersson May 11 '18 at 15:36
example will be i have 150000 and i would like it to be 150,000 no need digit after that :) Thanks a lot ! – tibewww May 11 '18 at 15:38
No problem. then use third case but with parseInt() – Attersson May 11 '18 at 15:39
i have replace parseFlaot but it doenst seems to work ? – tibewww May 11 '18 at 15:41
it is Number.parseFloat (check spelling). Or Number.parseInt – Attersson May 11 '18 at 15:45
i have added this: componentDidMount() { Number(parseInt().toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2}); } No luck :( – tibewww May 11 '18 at 15:46
Andrew Bone turned it into a snippet so press run and check – Attersson May 11 '18 at 15:49
Number.ParseInt.toFixed(2).toLocaleString('en', {minimumFractionDigits: 2}); giving me TypeError: Cannot read property 'toFixed' of undefined :( – tibewww May 11 '18 at 15:49
Alright some clarity here: parseInt(numberToBeParsed) (check case) is a function.... Number(something) converts something into a number or undefined. So try this: Number(Number.parseInt(numberToConvert).toFixed(2)) – Attersson May 11 '18 at 15:54
still no luck :( I have done this codepen if that help ? https://codepen.io/anon/pen/JvvyrR Thanks a lot really for all your time – tibewww May 11 '18 at 15:57
I have logged it and `Number(Number.parseInt(5000).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2}); console.log(Number(Number.parseInt(5000).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2})); //this is getting logged correctly... (ctrl+shift+i in chrome) //just display it in your html` – Attersson May 11 '18 at 16:02
it does display in the console but when i enter the number in the input field in the front end, its not being display with the coma . . .. it 's what im looking to have, – tibewww May 11 '18 at 16:05
My code only formatted the number it did not do anything to the HTML. I edited my answer and added the code to your function, the original function of your question. – Attersson May 11 '18 at 16:09
thanks a lot ! , its so much closer now, im getting it formatting as 1.00 now if i entered 150000 ( it display 1.00) but im looking to have 150,000 ... any idea ? – tibewww May 11 '18 at 16:15
I edited the function again. If it doesn't work you will have to console.log(e.event.target) and figure everything out from the values everywhere... – Attersson May 11 '18 at 16:17
I would like to add a note of caution with `toLocaleString`: countries don't always follow their own rules. For example, as someone born and raised in South Africa, NO ONE (not the banks, [news papers](https://allafrica.com/stories/202202230611.html), or [online stores](https://www.makro.co.za/electronics-computers/computers-tablets/laptops-notebooks/c/BHC)) follows the 'correct' rules: `1 234,99` - instead, our de facto rules are American: `1,234.99`. Your boss would likely kill you if you used correct convention. – aggregate1166877 Jul 19 '22 at 05:43

Add commas to larger numbers

1 Answers1