JavaScript number formatting

With JavaScript single function we can format number like we want for example in example this formatNumber function add comma and dot according to number pass in function see the demo for more info.

 
script.js
 
function formatNumber(num){
                var num,dec, numSplit;
            /*
            What we want     
            20000.0000 = 20,000.00
            2000 = 2,000.00
            */
            /*Return the absolute value of a number:
            Math.abs(-7.25);
            Result 7.25
            */
            num = Math.abs(num);
             /*Convert a number into a string, keeping only two decimals:
            var num = 5.56789;
            var n = num.toFixed(2);
            Result 5.57
            */
            num = num.toFixed(2);
            numSplit = num.split('.');
            int = numSplit[0];
            if(int.length > 3){
                /*string.substr(start, length)*/
                int = int.substr(0,int.length -3) + ',' + int.substr(int.length -3,3);
            }
            dec = numSplit[1];
            return  int + '.' + dec;
        };
       
var x = document.getElementsByClassName('result');
    for(var i = 0; i < x.length; i++){
        x[i].innerHTML = formatNumber(x[i].innerHTML);
    }
 
index.html
 
<div class="container">
            <h3>Change number format</h3>
             <div class="row">
         <div class="col-6">Actual</div>
        <div class="col-6">Result</div>
       
      </div>
       <div class="row">
        
       
        <div class="col-6">2</div>
        <div class="col-6 result">2</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">20</div>
        <div class="col-6 result">20</div>
      </div>
      <div class="row">
        
       
        <div class="col-6">200</div>
        <div class="col-6 result">200</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">2000</div>
        <div class="col-6 result">2000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">20000</div>
        <div class="col-6 result">20000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">200000</div>
        <div class="col-6 result">200000</div>
      </div>
       <div class="row">
      
       
        <div class="col-6">2000000</div>
        <div class="col-6 result">2000000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">20000000</div>
        <div class="col-6 result">20000000</div>
      </div>
        <div class="row">
        
       
        <div class="col-6">200000000</div>
        <div class="col-6 result">200000000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">2000000000</div>
        <div class="col-6 result">2000000000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">20000000000</div>
        <div class="col-6 result">20000000000</div>
      </div>
        <div class="row">
        
       
        <div class="col-6">200000000000</div>
        <div class="col-6 result">200000000000</div>
      </div>
       <div class="row">
        
       
        <div class="col-6">2000000000000</div>
        <div class="col-6 result">2000000000000</div>
      </div>
        <div class="row">
        
       
        <div class="col-6">20000000000000</div>
        <div class="col-6 result">20000000000000</div>
      </div>
         </div>

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *