jQuery Number Format

Download jQuery Number As-you-type Demo

Check out the updated number format plugin.

The update gives you more options for returning, or replacing numbers, along with as-you-type formatting for input fields!

Original Article:

Don't you wish there was a way to format numbers using JavaScript, that is as easy, or even easier than PHP's number formatting functions? I do.

In fact, many of my clients want consistently formatted numbers to be displayed on screen. Usually, I'm already calculating various numbers in JavaScript based on user input, and inserting the raw number into the document using the jQuery .text() function. But that doesn't give you consistent formatting.

var myNumber = 5000.1;
$('.number').text( myNumber );
<span class="redactor-invisible-space">
</span>// Output: 5000.1

I wanted something which made implementation as simple as possible, because this needed to be used in many places throughout the app, in many different elements, and for several different formats.

I wanted something that was as simple to implement as jQuery's .text() method.

var myNumber = 5000.1;
$('.number').number( myNumber, 2 ); // 2 decimal places.

// Output: 5000.10

There are loads of great methods around for formatting numbers. My favourite is the excellent phpjs.org library.

To make this even more convenient though, I wrapped it in a jQuery plugin which does the same thing as the .text() method — with the added ability to format the value with any number of decimal places, specifying the decimal point symbol, and thousands separator symbol.


     * A quick plugin which implements phpjs.org's number_format as a jQuery
     * plugin which formats the number, and inserts to the DOM.
     * By Sam Sehnert, customd.com - https://www.customd.com/articles/11/jquery-number-format
    $.fn.number = function( number, decimals, dec_point, thousands_sep ){    
        number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
        var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
        // Fix for IE parseFloat(0.55).toFixed(0) = 0;
        s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
        if (s[0].length > 3) {
            s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
        if ((s[1] || '').length > prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
        // Add this number to the element as text.
        this.text( s.join(dec) );

The result was, I only needed to change the .text() calls in the rest of my code to something like this:

var myNumber = 5000.1;
$('.number').number( myNumber, 2 ); // 2 decimal places.<p>// Output: 5,000.10</p><p>$('.number').number( myNumber ); // 0 decimal places (rounded).</p><p>// Output: 5,000</p><p>$('.number').number( myNumber, 1, ',', ' ' );</p><p>// Output: 5 000,1</p>

The default values set the decimal as '.', and thousands as ','. Just like PHP's number_format. Brilliant.

Take a look at the updated number format plugin, which gives you more options for returning, or replacing numbers along with .

Download jQuery Number As-you-type Demo

Write a response...