Thousand separator NAN and infinity javascript/ jquery error

Question

0.00/5 (No votes)

See more:

I am trying to implement a thousand separator while typing in MVC 6 razor page, the code below seems to work but it shows NAN if the number is deleted completely and also shows INFINITY if a large set of numbers are also entered into the textbox, lastly, it only separates the thousand part, it doesn't add the dot and the hundredth part to it, e.g: 10000 = 10, 000, but I want it to be like this: 10000 = 10, 000.00. I appreciate any assistance.

What I have tried:

JavaScript

$(function () {
            $("#TransAmount").on('keyup', function () {
                $(this).val(numberWithCommas(parseFloat($(this).val().replace(/,/g, ""))));
            });
        });
        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

Posted 30-Jun-23 12:09pm

Uwakpeter

Updated 30-Jun-23 23:12pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2023-06-30T18:43:00

One of the ways could be to:
1. separate the decimal part
2. regex the integer part
3. put decimal and integer parts back together

Have a look at few examples here:
Reference 1 (Javascript based): JavaScript Number Format - Add Commas - mredkj.com[^]

Example 1:

JavaScript

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

Results:

addCommas(1000)
// 1,000

addCommas(1231.897243)
// 1,231.897243

addCommas('9999999.00')
// 9,999,999.00

addCommas(-500000.99)
// -500,000.99

In case you are looking more locale/region specific, then you can simply use: toLocaleString()
Reference 2: Number.prototype.toLocaleString() - JavaScript | MDN[^]

Example:

JavaScript

$(".Comma").each(function(){ // To loop on each value
  var amount = parseFloat($(this).html()); // Convert string into float number
  var newamount = amount.toLocaleString('en-US'); // add comma
  $(this).html(newamount); // replace old number with new number
});

Reference 3: Use a jQuery plugin: Auto Add Thousand Separators In Numbers - Easy Number Separator | Free jQuery Plugins[^]

HTML

<script src="easy-number-separator.js"></script>
<input type="text" class="number-separator" placeholder="Enter Your Number Here...">

For handling NaN, you need to first check if it's a valid value to convert to a float or not.
You can make use of isNaN()[^] and accordingly handle the desired value.

For handling Infinity, you need to be within the limits datatype supports.

Quote:
Infinity values are returned when the number is outside the double-precision 64-bit IEEE 754-2019 format range

Reference: parseFloat() - JavaScript | MDN[^]

One possible way to handle very large value is to find alternate datatype like bigint[^] or so. Nothing standard that I know of.

Try and adjust to you need.