Add commas or spaces to group every three digits - javascript

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();
});

Related

What is the easiest way to convert 123456789 value to 123.456.789 in javascript?

I have a < p > with 123456789 value
I need to convert my < p > value into 123.456.789 number. What's the easiest way to do this in js?
Try it using regex. The match() function creates an array and join('.') will join the array elements to the required output.
str = "123456789";
str = str.match(/.{1,3}/g).join('.')
console.log(str)
Try Using this function.
Useful for any number and for any delimeter you pass through.
function formatNumber(n, d) // n = number, d = delimeter
{
// round to 2 decimals if cents present
n = (Math.round(n * 100) / 100).toString().split('.');
var
myNum = n[0].toString(),
fmat = new Array(),
len = myNum.length,
i = 1, deci = (d == '.') ? '' : '.';
for (i; i < len + 1; i++)
fmat[i] = myNum.charAt(i - 1);
fmat = fmat.reverse();
for (i = 1; i < len; i++)
{
if (i % 3 == 0) {
fmat[i] += d;
}
}
var val = fmat.reverse().join('') +
(n[1] == null ? deci + '':
(deci + n[1])
);
return val;
}
var res = formatNumber(123456789,'.');
console.log(res);
You can use .match() with RegExp /\d{3}(?=\d{6}|\d{3}|$)/g to match three digits followed by six digits, three digits or end of string, chain .join() to array returned by .match() with parameter "."
var str = "123456789";
var res = str.match(/\d{3}(?=\d{6}|\d{3}|$)/g).join(".");
console.log(res);
Regex combined with html will be enough to get it to work beautifully:
$(".telephone").html(function () {;
return $(this).html().match(/[0-9]{3}/g).join('.');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="telephone">123456789</p>
I has use some jquery code, pls try this! hope this can help you! :)
$('.number').text(function () {
var txt = $(this).text();
return txt.replace(/\B(?=(?:\d{3})+(?!\d))/g, '.');
});
$(document).ready(function(){
$('.number').text(function () {
var txt = $(this).text();
return txt.replace(/\B(?=(?:\d{3})+(?!\d))/g, '.');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number">123456789</p>
const convert= (str)=>{
let newStr=""
let pointer=0;
while(pointer < str.length){
newStr += str.charAt(pointer)
if(str.charAt(pointer) % 3 === 0 && pointer !== str.length-1){
newStr += "."
}
pointer++
}
console.log(newStr)
}
convert("123456789");

Convert string of time to cleaner format

There's usually some magical way to do something in javascript.
Take for example the string
10h49m02s
and wanting to convert it to
10 hours, 49 minutes, 2 seconds
while avoid empty hours/minutes/seconds
eg2
00h10m20s
This is what I'm doing which is probably hilarious
var arr = time.split('');
var hourMaj = arr[0];
var hourMin = arr[1];
var minMaj = arr[3];
var minMin = arr[4];
var secMaj = arr[6];
var secMin = arr[7];
var str = "";
if(hourMaj !== '0'){
str += hourMaj;
str += hourMin;
}else if (hourMin !== '0'){
str += hourMin;
}
if(hourMaj !== '0' || hourMin !== '0')
str += "hours, ";
... and on
You can actually use a regex to match your values and replace h, m and s with expanded words only if the captured texts are not zeros, like this:
var re = /\b0*(\d{1,2})h0*(\d{1,2})m0*(\d{1,2})s\b/g;
var str = '10h49m02s';
var str2 = '00h10m20s';
function func(match, h, m, s) {
var p = '';
if (h !== '0') {
p += h + " hours"
}
if (m !== '0') {
p += (p.length > 0 ? ", " : "") + m + " minutes"
}
if (s !== '0') {
p += (p.length > 0 ? ", " : "") + s + " seconds"
}
return p;
}
var res = str.replace(re, func);
document.write(res + "<br/>");
res = str2.replace(re, func);
document.write(res);
The regex - \b0*(\d{1,2})h0*(\d{1,2})m0*(\d{1,2})s\b - matches:
\b - word boundary
0* - 0 or more leading zeros
(\d{1,2}) - hours, 1 or 2 digits
h0* - h literally and 0 or more zeros
(\d{1,2}) - minutes, 1 or 2 digits
m0* - m literally and 0 or more zeros
(\d{1,2}) - seconds, 1 or 2 digits
s\b - s at the end of the "word".
Similar to stribizhev's answer, but with a much simpler regular expression. I've used reduce but a for loop is no more code and would probably be faster:
function parseTime(s) {
// Match sequences of numbers or letters
var b = s.match(/\d+|[a-z]+/gi);
var words = {h:'hour', m:'minute', s:'second'};
var result;
// If some matches found
if (b) {
// Do replacement
result = b.reduce(function(acc, p, i) {
// Only include values that aren't zero
// and skip letters - +p => NaN
if (+p) {
// Change letters to words, add plural and store in array
acc.push(+p + words[b[i+1]] + (p==1? '' : 's'));
}
// Pass the accumulator array to the next iteration
return acc;
},[])
}
// Format the result
return result.join(', ');
}
document.write(parseTime('00h00m02s') + '<br>');
document.write(parseTime('10h40m02s') + '<br>');
document.write(parseTime('10h00m51s') + '<br>');
document.write(parseTime('01h32m01s'));

Get Number of Decimal Places with Javascript

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;

Formatting currency with commas in Javascript for Adobe Acrobat

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

Format number string using commas

I want to format numbers. I have seen some of the regex expression example to insert comma in number string. All of them check 3 digits in a row and then insert comma in number. But i want something like this:
122 as 122
1234 as 1,234
12345 as 12,345
1723456 as 17,23,456
7123456789.56742 as 7,12,34,56,789.56742
I am very new to regex expression. Please help me how to display the number as the above. I have tried the below method. This always checks for 3 digits and then add comma.
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
But i want comma every 2 digits except for the last 3 digits before the decimals as shown above.
The result will depend on your browsers locale. But this might be an acceptable solution:
(7123456789.56742).toLocaleString();
Outputs:
7,123,456,789.56742
Try it and see if it outputs 7,12,34,56,789.567421 in your locale.
Here's a function to convert a number to a european (1.000,00 - default) or USA (1,000.00) style:
function sep1000(somenum,usa){
var dec = String(somenum).split(/[.,]/)
,sep = usa ? ',' : '.'
,decsep = usa ? '.' : ',';
return dec[0]
.split('')
.reverse()
.reduce(function(prev,now,i){
return i%3 === 0 ? prev+sep+now : prev+now;}
)
.split('')
.reverse()
.join('') +
(dec[1] ? decsep+dec[1] :'')
;
}
Alternative:
function sep1000(somenum,usa){
var dec = String(somenum).split(/[.,]/)
,sep = usa ? ',' : '.'
,decsep = usa ? '.' : ',';
return xsep(dec[0],sep) + (dec[1] ? decsep+dec[1] :'');
function xsep(num,sep) {
var n = String(num).split('')
,i = -3;
while (n.length + i > 0) {
n.splice(i, 0, sep);
i -= 4;
}
return n.join('');
}
}
//usage for both functions
alert(sep1000(10002343123.034)); //=> 10.002.343.123,034
alert(sep1000(10002343123.034,true)); //=> 10,002,343,123.034
[edit based on comment] If you want to separate by 100, simply change i -= 4; to i -= 3;
function sep100(somenum,usa){
var dec = String(somenum).split(/[.,]/)
,sep = usa ? ',' : '.'
,decsep = usa ? '.' : ',';
return xsep(dec[0],sep) + (dec[1] ? decsep+dec[1] :'');
function xsep(num,sep) {
var n = String(num).split('')
,i = -3;
while (n.length + i > 0) {
n.splice(i, 0, sep);
i -= 3; //<== here
}
return n.join('');
}
}
use toLocaleString();
It automatically handles inserting commas and will also handle uk strings the right way
e.g.
var num=63613612837131;
alert(num.toLocaleString());
Below is the snippet of code, can be done in better way but this works :D
function formatDollar(num)
{
var p = num.toFixed(2).split(".");
var chars = p[0].split("").reverse();
var sep1000 = false;
var newstr = '';
var count = 0;
var count2=0;
for (x in chars)
{
count++;
if(count%3 == 1 && count != 1 %% !sep1000)
{
newstr = chars[x] + ',' + newstr;
sep1000=true;
}
else
{
if(!sep1000)
{
newstr = chars[x] + ',' + newstr;
}
else
{
count2++;
if(count%2 == 0 && count != 1)
{
newstr = chars[x] + ',' + newstr;
}
else
{
newstr = chars[x] + newstr;
}
}
}
}
return newstr + "." + p[1];
}

Categories

Resources