Related
User is allowed to insert up to 25 value in textbox.
i.e. 1234567890123456789012345
On change event of textbox I need to convert that same into numeric value to perform numeric operations and then after need to display same entered value with thousand separator along with 2 decimal places.
I tried the following code:
Number($('#textbox1').val()).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
parseInt($('#textbox1').val(), 10).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
Both gives me following output
1.2,345,679,801,234,568e+21
expected output:-
1,234,567,890,123,456,789,012,345.00
Try using autoNumeric js. Find it here
something like this work for you? I found it on the internet...
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 + '.00';
}
for the numeric point of view, still i could not get any solution at JavaScript, so I have posted the value to server side and get JSon result.
But for the display purpose I have did finally :
function ChangeAmountFormat(target) {
var $this = $(target);
var num = $this.val().replace(/,/g, '').replace(/(\s)/g, '');
var decimalPointDeleted = '';
if (lastValue.length > 0 && lastValue.indexOf('.') > 0 && num.indexOf('.') < 0) {
decimalPointDeleted = 'y';
}
if (num.indexOf('.') >= 0) {
var numSplitValues = num.split('.');
num = numSplitValues[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
num += (num.length > 0 ? ('.' + numSplitValues[1]) : '');
}
else {
if (decimalPointDeleted == 'y' && num.toString().substring((num.length - 2), num.length) == '00') {
var tempNum = num.toString().substring(0, (num.length - 2));
num = tempNum + '.' + num.toString().substring((num.length - 2), num.length);
}
else {
num = num + (num.length > 0 ? '.00' : '');
}
num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$this.val(num);
}
here, some more things also handles. Kindly ignore.
How would I calculate the number of decimal places (not digits) of a real number with Javascript?
function countDecimals(number) {
}
For example, given 245.395, it should return 3.
Like this:
var val = 37.435345;
var countDecimals = function(value) {
let text = value.toString()
// verify if number 0.000005 is represented as "5e-6"
if (text.indexOf('e-') > -1) {
let [base, trail] = text.split('e-');
let deg = parseInt(trail, 10);
return deg;
}
// count decimals for number in representation like "0.123456"
if (Math.floor(value) !== value) {
return value.toString().split(".")[1].length || 0;
}
return 0;
}
countDecimals(val);
The main idea is to convert a number to string and get the index of "."
var x = 13.251256;
var text = x.toString();
var index = text.indexOf(".");
alert(text.length - index - 1);
Here is a method that does not rely on converting anything to string:
function getDecimalPlaces(x,watchdog)
{
x = Math.abs(x);
watchdog = watchdog || 20;
var i = 0;
while (x % 1 > 0 && i < watchdog)
{
i++;
x = x*10;
}
return i;
}
Note that the count will not go beyond watchdog value (defaults to 20).
I tried some of the solutions in this thread but I have decided to build on them as I encountered some limitations. The version below can handle: string, double and whole integer input, it also ignores any insignificant zeros as was required for my application. Therefore 0.010000 would be counted as 2 decimal places. This is limited to 15 decimal places.
function countDecimals(decimal)
{
var num = parseFloat(decimal); // First convert to number to check if whole
if(Number.isInteger(num) === true)
{
return 0;
}
var text = num.toString(); // Convert back to string and check for "1e-8" numbers
if(text.indexOf('e-') > -1)
{
var [base, trail] = text.split('e-');
var deg = parseInt(trail, 10);
return deg;
}
else
{
var index = text.indexOf(".");
return text.length - index - 1; // Otherwise use simple string function to count
}
}
You can use a simple function that splits on the decimal place (if there is one) and counts the digits after that. Since the decimal place can be represented by '.' or ',' (or maybe some other character), you can test for that and use the appropriate one:
function countPlaces(num) {
var sep = String(23.32).match(/\D/)[0];
var b = String(num).split(sep);
return b[1]? b[1].length : 0;
}
console.log(countPlaces(2.343)); // 3
console.log(countPlaces(2.3)); // 1
console.log(countPlaces(343.0)); // 0
console.log(countPlaces(343)); // 0
Based on Gosha_Fighten's solution, for compatibility with integers:
function countPlaces(num) {
var text = num.toString();
var index = text.indexOf(".");
return index == -1 ? 0 : (text.length - index - 1);
}
based on LePatay's solution, also take care of the Scientific notation (ex: 3.7e-7) and with es6 syntax:
function countDecimals(num) {
let text = num.toString()
if (text.indexOf('e-') > -1) {
let [base, trail] = text.split('e-')
let elen = parseInt(trail, 10)
let idx = base.indexOf(".")
return idx == -1 ? 0 + elen : (base.length - idx - 1) + elen
}
let index = text.indexOf(".")
return index == -1 ? 0 : (text.length - index - 1)
}
var value = 888;
var valueLength = value.toString().length;
When adding Javascript to a PDF, is it possible for me to print a float so that it looks like this: $50,0000?
I don't care about internationalization.
I can use util.printf, but it won't put the commas in.
Did you mean to do it by javascript. Does this help you.
formatNumber
function formatNumber( num ) {
var decimalPart = '';
num = num.toString();
if ( num.indexOf( '.' ) != -1 ) {
decimalPart = '.'+ num.split( '.' )[1];
num = parseInt(num.split( '.' )[0]);
}
var array = num.toString().split( '' );
var index = -3;
while ( array.length + index > 0 ) {
array.splice( index, 0, ',' );
index -= 4;
}
return array.join( '' ) + decimalPart;
}
A simple add commas function is:
function addCommas(num) {
var num = String(num);
var bits, num0, s, f, len, sign = '', result = [];
if (/^[+-]/.test(num)) {
sign = num.substring(0,1);
num = num.substring(1);
}
bits = String(num).split('.');
num0 = bits[0];
s = 0, f = num0.length % 3 ;
len = num0.length;
if (num0.length > 3) {
while (f <= len) {
f && result.push(num0.substring(s, f));
s = f;
f += 3;
}
result = result.join(',') + (bits[1]? '.' + bits[1] : '');
}
return sign + (s? result : num);
}
There are probably a million similar functions, try Google.
Edit
Fixed issue where length > 6 and num % 3 == 0
Added support for -ve numbers
A little late but...
printf will add commas.
util.printf("%,0.0f", numberValue);
See JavaScript™ for Acrobat® API Reference for more...
This solution will also work for negative numbers as well.
function addCommas( num ) {
var parts = num.toString(10).split(".");
parts[0] = parts[0].reverse().replace(/(\d{3})/g, "$1,").reverse();
return parts.join(".");
}
String.prototype.reverse = function () {
return this.split("").reverse().join("");
}
Fiddle here
I have a function to add commas to numbers:
function commafy( num ) {
num.toString().replace( /\B(?=(?:\d{3})+)$/g, "," );
}
Unfortunately, it doesn't like decimals very well. Given the following usage examples, what is the best way to extend my function?
commafy( "123" ) // "123"
commafy( "1234" ) // "1234"
// Don't add commas until 5 integer digits
commafy( "12345" ) // "12,345"
commafy( "1234567" ) // "1,234,567"
commafy( "12345.2" ) // "12,345.2"
commafy( "12345.6789" ) // "12,345.6789"
// Again, nothing until 5
commafy( ".123456" ) // ".123 456"
// Group with spaces (no leading digit)
commafy( "12345.6789012345678" ) // "12,345.678 901 234 567 8"
Presumably the easiest way is to first split on the decimal point (if there is one). Where best to go from there?
Just split into two parts with '.' and format them individually.
function commafy( num ) {
var str = num.toString().split('.');
if (str[0].length >= 5) {
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
if (str[1] && str[1].length >= 5) {
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
}
return str.join('.');
}
Simple as that:
var theNumber = 3500;
theNumber.toLocaleString();
Here are two concise ways I think maybe useful:
Number.prototype.toLocaleString
This method can convert a number to a string with a language-sensitive representation. It allows two parameters, which is locales & options. Those parameters may be a bit confusing, for more detail see that doc from MDN above.
In a word, you could simply use is as below:
console.log(
Number(1234567890.12).toLocaleString()
)
// log -> "1,234,567,890.12"
If you see different with me that because we ignore both two parameters and it will return a string base on your operation system.
Use regex to match a string then replace to a new string.
Why we consider this? The toLocaleString() is a bit confusing and not all browser supported, also toLocaleString() will round the decimal, so we can do it in another way.
// The steps we follow are:
// 1. Converts a number(integer) to a string.
// 2. Reverses the string.
// 3. Replace the reversed string to a new string with the Regex
// 4. Reverses the new string to get what we want.
// This method is use to reverse a string.
function reverseString(str) {
return str.split("").reverse().join("");
}
/**
* #param {string | number}
*/
function groupDigital(num) {
const emptyStr = '';
const group_regex = /\d{3}/g;
// delete extra comma by regex replace.
const trimComma = str => str.replace(/^[,]+|[,]+$/g, emptyStr)
const str = num + emptyStr;
const [integer, decimal] = str.split('.')
const conversed = reverseString(integer);
const grouped = trimComma(reverseString(
conversed.replace(/\d{3}/g, match => `${match},`)
));
return !decimal ? grouped : `${grouped}.${decimal}`;
}
console.log(groupDigital(1234567890.1234)) // 1,234,567,890.1234
console.log(groupDigital(123456)) // 123,456
console.log(groupDigital("12.000000001")) // 12.000000001
Easiest way:
1
var num = 1234567890,
result = num.toLocaleString() ;// result will equal to "1 234 567 890"
2
var num = 1234567.890,
result = num.toLocaleString() + num.toString().slice(num.toString().indexOf('.')) // will equal to 1 234 567.890
3
var num = 1234567.890123,
result = Number(num.toFixed(0)).toLocaleString() + '.' + Number(num.toString().slice(num.toString().indexOf('.')+1)).toLocaleString()
//will equal to 1 234 567.890 123
4
If you want ',' instead of ' ':
var num = 1234567.890123,
result = Number(num.toFixed(0)).toLocaleString().split(/\s/).join(',') + '.' + Number(num.toString().slice(num.toString().indexOf('.')+1)).toLocaleString()
//will equal to 1,234,567.890 123
If not working, set the parameter like: "toLocaleString('ru-RU')"
parameter "en-EN", will split number by the ',' instead of ' '
All function used in my code are native JS functions. You'll find them in GOOGLE or in any JS Tutorial/Book
If you are happy with the integer part (I haven't looked at it closly), then:
function formatDecimal(n) {
n = n.split('.');
return commafy(n[0]) + '.' + n[1];
}
Of course you may want to do some testing of n first to make sure it's ok, but that's the logic of it.
Edit
Ooops! missed the bit about spaces! You can use the same regular exprssion as commafy except with spaces instead of commas, then reverse the result.
Here's a function based on vol7ron's and not using reverse:
function formatNum(n) {
var n = ('' + n).split('.');
var num = n[0];
var dec = n[1];
var r, s, t;
if (num.length > 3) {
s = num.length % 3;
if (s) {
t = num.substring(0,s);
num = t + num.substring(s).replace(/(\d{3})/g, ",$1");
} else {
num = num.substring(s).replace(/(\d{3})/g, ",$1").substring(1);
}
}
if (dec && dec.length > 3) {
dec = dec.replace(/(\d{3})/g, "$1 ");
}
return num + (dec? '.' + dec : '');
}
I have extended #RobG's answer a bit more and made a sample jsfiddle
function formatNum(n, prec, currSign) {
if(prec==null) prec=2;
var n = ('' + parseFloat(n).toFixed(prec).toString()).split('.');
var num = n[0];
var dec = n[1];
var r, s, t;
if (num.length > 3) {
s = num.length % 3;
if (s) {
t = num.substring(0,s);
num = t + num.substring(s).replace(/(\d{3})/g, ",$1");
} else {
num = num.substring(s).replace(/(\d{3})/g, ",$1").substring(1);
}
}
return (currSign == null ? "": currSign +" ") + num + (dec? '.' + dec : '');
}
alert(formatNum(123545.3434));
alert(formatNum(123545.3434,2));
alert(formatNum(123545.3434,2,'€'));
and extended same way the #Ghostoy's answer
function commafy( num, prec, currSign ) {
if(prec==null) prec=2;
var str = parseFloat(num).toFixed(prec).toString().split('.');
if (str[0].length >= 5) {
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
if (str[1] && str[1].length >= 5) {
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
}
return (currSign == null ? "": currSign +" ") + str.join('.');
}
alert(commafy(123545.3434));
Here you go edited after reading your comments.
function commafy( arg ) {
arg += ''; // stringify
var num = arg.split('.'); // incase decimals
if (typeof num[0] !== 'undefined'){
var int = num[0]; // integer part
if (int.length > 4){
int = int.split('').reverse().join(''); // reverse
int = int.replace(/(\d{3})/g, "$1,"); // add commas
int = int.split('').reverse().join(''); // unreverse
}
}
if (typeof num[1] !== 'undefined'){
var dec = num[1]; // float part
if (dec.length > 4){
dec = dec.replace(/(\d{3})/g, "$1 "); // add spaces
}
}
return (typeof num[0] !== 'undefined'?int:'')
+ (typeof num[1] !== 'undefined'?'.'+dec:'');
}
This worked for me:
function commafy(inVal){
var arrWhole = inVal.split(".");
var arrTheNumber = arrWhole[0].split("").reverse();
var newNum = Array();
for(var i=0; i<arrTheNumber.length; i++){
newNum[newNum.length] = ((i%3===2) && (i<arrTheNumber.length-1)) ? "," + arrTheNumber[i]: arrTheNumber[i];
}
var returnNum = newNum.reverse().join("");
if(arrWhole[1]){
returnNum += "." + arrWhole[1];
}
return returnNum;
}
Assuming your usage examples are not representative of already-working code but instead desired behavior, and you are looking for help with the algorithm, I think you are already on the right track with splitting on any decimals.
Once split, apply the existing regex to the left side, a similiar regex adding the spaces instead of commas to the right, and then rejoin the the two into a single string before returning.
Unless, of course, there are other considerations or I have misunderstood your question.
This is basically the same as the solution from Ghostoy, but it fixes an issue where numbers in the thousands are not handled properly. Changed '5' to '4':
export function commafy(num) {
const str = num.toString().split('.');
if (str[0].length >= 4) {
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
if (str[1] && str[1].length >= 4) {
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
}
return str.join('.');
}
//Code in Java
private static String formatNumber(String myNum) {
char[] str = myNum.toCharArray();
int numCommas = str.length / 3;
char[] formattedStr = new char[str.length + numCommas];
for(int i = str.length - 1, j = formattedStr.length - 1, cnt = 0; i >= 0 && j >=0 ;) {
if(cnt != 0 && cnt % 3 == 0 && j > 0) {
formattedStr[j] = ',';
j--;
}
formattedStr[j] = str[i];
i--;
j--;
cnt++;
}
return String.valueOf(formattedStr);
}
You can do it mathematically, depending on how many digits you want to separate, you can start from one digit with 10 to 100 for 2, and so on.
function splitDigits(num) {
num=Math.ceil(num);
let newNum = '';
while (num > 1000){
let remain = num % 1000;
num = Math.floor(num / 1000);
newNum = remain + ',' + newNum;
}
return num + ',' + newNum.slice(0,newNum.length-1);
}
At first you should select the input with querySelector like:
let field = document.querySelector("input");
and then
field.addEventListener("keyup", () => {
for (let i = 1 ; i <= field.value.length; i++) {
field.value = field.value.replace(",", "");
}
let counter=0;
for (let i = 1 ; i <= field.value.length; i++) {
if ( i % ((3 * (counter+1) ) + counter) ===0){
let tempVal =field.value
field.value = addStr(tempVal,field.value.length - i,",")
counter++;
console.log(field.value);
}
}
// field.value = parseInt(field.value.replace(/\D/g, ''), 10);
// var n = parseInt(e.target.value.replace(/\D/g,''),10);
// e.target.value = n.toLocaleString();
});
This question already has answers here:
How to format numbers as currency strings
(67 answers)
Closed 3 years ago.
I want to format numbers using JavaScript.
For example:
10 => 10.00
100 => 100.00
1000 => 1,000.00
10000 => 10,000.00
100000 => 100,000.00
If you want to use built-in code, you can use toLocaleString() with minimumFractionDigits.
Browser compatibility for the extended options on toLocaleString() was limited when I first wrote this answer, but the current status looks good. If you're using Node.js, you will need to npm install the intl package.
var value = (100000).toLocaleString(
undefined, // leave undefined to use the visitor's browser
// locale or a string like 'en-US' to override it.
{ minimumFractionDigits: 2 }
);
console.log(value);
Number formatting varies between cultures. Unless you're doing string comparison on the output,1 the polite thing to do is pick undefined and let the visitor's browser use the formatting they're most familiar with.2
// Demonstrate selected international locales
var locales = [
undefined, // Your own browser
'en-US', // United States
'de-DE', // Germany
'ru-RU', // Russia
'hi-IN', // India
'de-CH', // Switzerland
];
var n = 100000;
var opts = { minimumFractionDigits: 2 };
for (var i = 0; i < locales.length; i++) {
console.log(locales[i], n.toLocaleString(locales[i], opts));
}
If you are from a culture with a different format from those above, please edit this post and add your locale code.
1 Which you shouldn't.
2 Obviously do not use this for currency with something like {style: 'currency', currency: 'JPY'} unless you have converted to the local exchange rate. You don't want your website to tell people the price is ¥300 when it's really $300. Sometimes real e-commerce sites make this mistake.
Use
num = num.toFixed(2);
Where 2 is the number of decimal places
Edit:
Here's the function to format number as you want
function formatNumber(number)
{
number = number.toFixed(2) + '';
x = number.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;
}
Sorce: www.mredkj.com
Short solution:
var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"
On browsers that support the ECMAScript® 2016 Internationalization API Specification (ECMA-402), you can use an Intl.NumberFormat instance:
var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
// 42.000.000 in many other locales
if (typeof Intl === "undefined" || !Intl.NumberFormat) {
console.log("This browser doesn't support Intl.NumberFormat");
} else {
var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
// 42.000.000 in many other locales
}
Due to the bugs found by JasperV — good points! — I have rewritten my old code. I guess I only ever used this for positive values with two decimal places.
Depending on what you are trying to achieve, you may want rounding or not, so here are two versions split across that divide.
First up, with rounding.
I've introduced the toFixed() method as it better handles rounding to specific decimal places accurately and is well support. It does slow things down however.
This version still detaches the decimal, but using a different method than before. The w|0 part removes the decimal. For more information on that, this is a good answer. This then leaves the remaining integer, stores it in k and then subtracts it again from the original number, leaving the decimal by itself.
Also, if we're to take negative numbers into account, we need to while loop (skipping three digits) until we hit b. This has been calculated to be 1 when dealing with negative numbers to avoid putting something like -,100.00
The rest of the loop is the same as before.
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
In the snippet below you can edit the numbers to test yourself.
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsWithRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />
Now the other version, without rounding.
This takes a different route and attempts to avoid mathematical calculation (as this can introduce rounding, or rounding errors). If you don't want rounding, then you are only dealing with things as a string i.e. 1000.999 converted to two decimal places will only ever be 1000.99 and not 1001.00.
This method avoids using .split() and RegExp() however, both of which are very slow in comparison. And whilst I learned something new from Michael's answer about toLocaleString, I also was surprised to learn that it is — by quite a way — the slowest method out of them all (at least in Firefox and Chrome; Mac OSX).
Using lastIndexOf() we find the possibly existent decimal point, and from there everything else is pretty much the same. Save for the padding with extra 0s where needed. This code is limited to 5 decimal places. Out of my test this was the faster method.
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsNoRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />
I'll update with an in-page snippet demo shortly, but for now here is a fiddle:
https://jsfiddle.net/bv2ort0a/2/
Old Method
Why use RegExp for this? — don't use a hammer when a toothpick will do i.e. use string manipulation:
var formatThousands = function(n, dp){
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r +
(d ? '.' + Math.round(d * Math.pow(10, dp || 2)) : '');
};
walk through
formatThousands( 1000000.42 );
First strip off decimal:
s = '1000000', d = ~ 0.42
Work backwards from the end of the string:
',' + '000'
',' + '000' + ',000'
Finalise by adding the leftover prefix and the decimal suffix (with rounding to dp no. decimal points):
'1' + ',000,000' + '.42'
fiddlesticks
http://jsfiddle.net/XC3sS/
Use the Number function toFixed and this function to add the commas.
function addCommas(nStr)
{
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
n = 10000;
r = n.toFixed(2); //10000.00
addCommas(r); // 10,000.00
http://www.mredkj.com/javascript/numberFormat.html
I think with this jQuery-numberformatter you could solve your problem.
Of course, this is assuming that you don't have problem with using jQuery in your project. Please notice that the functionality is tied to the blur event.
$("#salary").blur(function(){
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00", locale:"us"});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/timdown/jshashtable/hashtable.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hardhub/jquery-numberformatter/src/jquery.numberformatter.js"></script>
<input type="text" id="salary">
You may want to consider using toLocaleString()
Working Example:
const number = 1234567890.123;
console.log(number.toLocaleString('en-US')); // US format
console.log(number.toLocaleString('en-IN')); // Indian format
Tested in Chrome v60 and v88
Source: Number.prototype.toLocaleString() | MDN
function numberWithCommas(x) {
x=String(x).toString();
var afterPoint = '';
if(x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'),x.length);
x = Math.floor(x);
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
}
console.log(numberWithCommas(100000));
console.log(numberWithCommas(10000000));
Output
1,00,000
1,00,00,000
This is an article about your problem. Adding a thousands-seperator is not built in to JavaScript, so you'll have to write your own function like this (example taken from the linked page):
function addSeperator(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;
}
Or you could use the sugar.js library, and the format method:
format( place = 0 , thousands = ',' , decimal = '.' ) Formats the number to a readable string. If place is undefined, will automatically
determine the place. thousands is the character used for the thousands
separator. decimal is the character used for the decimal point.
Examples:
(56782).format() > "56,782"
(56782).format(2) > "56,782.00"
(4388.43).format(2, ' ') > "4 388.43"
(4388.43).format(3, '.', ',') > "4.388,430"
Let me also throw my solution in here. I've commented each line for ease of reading and also provided some examples, so it may look big.
function format(number) {
var decimalSeparator = ".";
var thousandSeparator = ",";
// make sure we have a string
var result = String(number);
// split the number in the integer and decimals, if any
var parts = result.split(decimalSeparator);
// if we don't have decimals, add .00
if (!parts[1]) {
parts[1] = "00";
}
// reverse the string (1719 becomes 9171)
result = parts[0].split("").reverse().join("");
// add thousand separator each 3 characters, except at the end of the string
result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator);
// reverse back the integer and replace the original integer
parts[0] = result.split("").reverse().join("");
// recombine integer with decimals
return parts.join(decimalSeparator);
}
document.write("10 => " + format(10) + "<br/>");
document.write("100 => " + format(100) + "<br/>");
document.write("1000 => " + format(1000) + "<br/>");
document.write("10000 => " + format(10000) + "<br/>");
document.write("100000 => " + format(100000) + "<br/>");
document.write("100000.22 => " + format(100000.22) + "<br/>");
This will get you your comma seperated values as well as add the fixed notation to the end.
nStr="1000";
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');
}
commaSeperated = x1 + x2 + ".00";
alert(commaSeperated);
Source
If you're using jQuery, you could use the format or number format plugins.
function formatNumber1(number) {
var comma = ',',
string = Math.max(0, number).toFixed(0),
length = string.length,
end = /^\d{4,}$/.test(string) ? length % 3 : 0;
return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma);
}
function formatNumber2(number) {
return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
}
Source: http://jsperf.com/number-format
This is about 3 times faster version of the accepted answer. It doesn't create array and avoids object creation and string concatenation for whole numbers at the end. This might be useful if you render lots of values e.g. in a table.
function addThousandSeparators(number) {
var whole, fraction
var decIndex = number.lastIndexOf('.')
if (decIndex > 0) {
whole = number.substr(0, decIndex)
fraction = number.substr(decIndex)
} else {
whole = number
}
var rgx = /(\d+)(\d{3})/
while (rgx.test(whole)) {
whole = whole.replace(rgx, '$1' + ',' + '$2')
}
return fraction ? whole + fraction : whole
}
function formatThousands(n,dp,f) {
// dp - decimal places
// f - format >> 'us', 'eu'
if (n == 0) {
if(f == 'eu') {
return "0," + "0".repeat(dp);
}
return "0." + "0".repeat(dp);
}
/* round to 2 decimal places */
//n = Math.round( n * 100 ) / 100;
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
var a = s.substr(0, i + 3) + r + (d ? '.' + Math.round((d+1) * Math.pow(10,dp)).toString().substr(1,dp) : '');
/* change format from 20,000.00 to 20.000,00 */
if (f == 'eu') {
var b = a.toString().replace(".", "#");
b = b.replace(",", ".");
return b.replace("#", ",");
}
return a;
}