Javascript Formatting Numbers, Prices or Amounts

After looking around at many different number formatting scripts, I figured surely the joy of regular expressions could do this is far fewer lines of code, so off I set and below is my creation. First is the two line function, below that I have put each statement on a new line for ease of explaining what/how it does its formatting.

function formatNumber(number) {
  number=number+'';
  return number.replace(/[^\d\.\-]/g, '').replace(/(\.\d{2})[\W\w]+/g, '$1').split('').reverse().join('').replace(/(\d{3})/g, '$1,').split('').reverse().join('').replace(/^([\-]{0,1}),/, '$1').replace(/(\.\d)$/, '$1'+'0').replace(/\.$/, '.00');
}

Some examples

formatNumber(-1234.56);
formatNumber(1234567.890);
formatNumber(123.3);
formatNumber('4423897544352423434');

Output

-1,234.56
1,234,567.89
123.30
4,423,897,544,352,423,434

Explination

function formatNumber(number) {
  number=number+'';
  return number.replace(/[^\d\.\-]/g, '')
    .replace(/(\.\d{2})[\W\w]+/g, '$1')
    .split('')
    .reverse()
    .join('')
    .replace(/(\d{3})/g,'$1,')
    .split('')
    .reverse()
    .join('')
    .replace(/^([\-]{0,1}),/, '$1')
    .replace(/(\.\d)$/, '$1'+'0')
    .replace(/\.$/, '.00');
}

number=number+'';

Simply converts number into a string.

return number.replace(/[^\d\.\-]/g, '')

Replaces anything that isn’t a digit (\d), a full stop (\.) or a minus sign (\-) with an empty string (”). This will get rid of dollar signs, already existing formatting like commas etc.

.replace(/(\.\d{2})[\W\w]+/g, '$1')

Detects the first 2 digits after the first full stop (\.\d{2}) and captures this info. Then detects all characters after the first two digits till the end of the line [\W\w]+. All this gets replaced with the first match. eg 100.1234 (\.\d{2}) matches .12 and [\W\w]+ matches 34. Then .1234 gets replaced with .12

.split('')

Split the string into an Array.

.reverse()

Reverse the array.

.join('')

Join the array back into a String.

.replace(/(\d{3})/g,'$1,')

Match groups of 3 digits (\d{3}), and replace them with the matches text followed by a comma $1,.

.split('')

Split the string into an Array again.

.reverse()

Reverse the array again.

.join('')

Join the array back to a string.

.replace(/^([\-]{0,1}),/, '$1')

Matches 0 to 1 occurrences of a minus sign ([\-]{0,1}) at the start of a line (^), followed by a comma. This gets replaced by the first match, which is either an empty string or a minus sign. -,123 becomes -123.

.replace(/(\.\d)$/, '$1'+'0')

Matches a single digit following a full stop (\.\d) at the end of the line ($), and replaces this with the full stop and digit plus a 0. 1.1 becomes 1.10

.replace(/\.$/, '.00');

Matches a full stop at the end of the line, and replaces it with .00

If you have any questions or find any bugs, leave me a comment and let me know.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Tag Cloud

Follow

Get every new post delivered to your Inbox.