CODEWITHSUNDEEP
javascriptjqueryregex
MHS
MHS

Reputation: 2350

How to insert commas in numbers in an html template?

I have an html template, I want to make a generalize function that itself finds all the numbers in my template and insert comma after every 3 digits. Currently I am using this function which may take some value as an input to convert it into comma separated form.

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

My template contains labels, tables & input fields.
Please help me how can I do that?

Upvotes: 0

Views: 2955

Answers (4)

Rupam Datta
Rupam Datta

Reputation: 1879

I've a solution which probably works the way you want. This is only as far my understanding of the problem.

Here are few lines of code. The fiddle is also linked

var formatedNumbers=function(){
    count=document.getElementsByTagName('input').length;

    for(i=0;i<count;i++){
        if(!isNaN(document.getElementsByTagName('input')[i].value) && document.getElementsByTagName('input')[i].value!=""){
            document.getElementsByTagName('input')[i].value=formatNumber(document.getElementsByTagName('input')[i].value);
        }
    }
};

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Working Demo http://jsfiddle.net/cse_tushar/P3CSF/

you can use this awesome function for number formatting

e.g 

var num=123456789.12345
num.formatMoney(5) //returns 123,456,789.12345 
num.formatMoney(2) //returns 123,456,789.12

function code is here :-

Number.prototype.formatMoney = function(c, d, t){
var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

console.log((123456789.12345).formatMoney(5, '.', ','));
console.log((123456789.12345).formatMoney(2));

if you want plugins :- Plugins

Upvotes: 1

Anderson
Anderson

Reputation: 2752

  1. If the templates know where the numbers are, just put a class for them. After the template being rendered, select and change the numbers together. Note: there'is a jquery plugin called format_currency.

  2. If the templates does NOT know, do it after render done:

    $('#TEMPLATE_CONTAINER input,#TEMPLATE_CONTAINER label,#TEMPLATE_CONTAINER td').each(function(){          
    FORMAT($(this));//format only if $(this).text() is a number     
})

Upvotes: 1

Saeed Neamati
Saeed Neamati

Reputation: 35822

There are many ways:

  1. You can wrap your money values inside a <span class='money'></span> span, and then using jQuery format those values, on DOM ready.
  2. Using Angular JS, you can give your money values a directive, say ng-money and define that directive such that it formats the content of that span.
  3. Third way is to send money values already commified (as you mentioned that :D ), and use them directly inside your template. Usually on server side, it's easier to format numbers and values.

Upvotes: 0

Related Questions