<

Go Premium for a chance to win a PS4. Enter to Win

x

Javascript number formating

Published on
9,787 Points
3,687 Views
1 Endorsement
Last Modified:
The task

A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome.

So let’s take a number like this “12345678.91¿ and format it to “12 345 678.91¿. To be shorter I assign it to a variable and hustled up following line which produced desired format:
> var n = "12345678.91";
> n.split('').reverse().join('').match(/.{1,3}/g).join(' ').split('').reverse().join('').replace(/\s\.|,\./g, '.'));
> "12 345 678.91"

Open in new window


How it’s made

First there is a string that has to be split somehow into triad. This is pretty simple – I’ve just used Regular expression with match and join methods to get the result back into a string using desired digital group separator (space in the case):
> n.match(/.{1,3}/g).join(' ');
> "123 456 78. 91"

Open in new window

The problem here is that RegExp is staring from left to right and produced wrong (from the task’s point of view) result. There is a two spaces where there shouldn’t be: after the dot and in the last triad (having two digits instead of three). First space I’ve eliminated adding regexp replace function.
> n.match(/.{1,3}/g).join(' ').replace(/\.\s/g, '.');
> "123 456 78.91"

Open in new window

Now it seems OK on the right of the dot. But last triad has still two digits. This is because RegExp rules passed to the match function are applied from left to right. So until dot is found it is impossible to predict how triad will be formed. Instead of applying more complicated regexp I’ve decided to reverse numbers before to add group separator.
> n.split('').reverse().join('').match(/.{1,3}/g).join(' ');
> "19. 876 543 21"

Open in new window

This way I’ve passed over the problem with the direction rules have been applied to the input. As the result is reversed at this point, I’ve to switch it back to original order adding same functions, this time on the right end.
> n.split('').reverse().join('').match(/.{1,3}/g).join(' ').split('').reverse().join('');
> "12 345 678 .91"

Open in new window

This is pretty close to desired result nevertheless there is one surplus delimiter before the dot. It might be easily eliminated using replace function.
> n.split('').reverse().join('').match(/.{1,3}/g).join(' ').split('').reverse().join('').replace(/\s\./g, '.');
> "12 345 678.91"

Open in new window

That’s it.


Some final thoughts:

What if we have a number instead of a string?
var n = 12345678.91;Applying the long line just composed against a number will produce an error…
Solution?

Just add one more step in front of all the others:
> n.toFixed(2).split('').reverse().join('').match(/.{1,3}/g).join(' ').split('').reverse().join('').replace(/\s\./g, '.'); > "12 345 678.91"

What if a number is required as result?

Right! Still another step – multiplication by 1 – at the end.
> n.toFixed(2).split('').reverse().join('').match(/.{1,3}/g).join(' ').split('').reverse().join('').replace(/\s\./g, '.')*1; > 12 345 678.91

Now you know how it's made ;-)
1
Comment
Author:Ivo Stoykov
2 Comments
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
well how we show it then
0
 
LVL 22

Author Comment

by:Ivo Stoykov
if you mean the result... Just assign it to a variable
// var res = n.toFixed(2).split('') ... put all the stuff here

Open in new window

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month