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

6 thoughts on “JavaScript number formatting

  1. Felicitas

    Just wish to say your article is as amazing. The clearness in your post is simply nice and i could assume you are an expert on this subject.

    Well with your permission allow me to grab your RSS feed to keep updated with
    forthcoming post. Thanks a million and please carry on the gratifying work.

  2. Carlotta Dossous

    I don’t know whether it’s just me or if perhaps everyone elseexperiencing issues with your website. It appears as though some ofthe written text on your posts are running off the screen. Can somebody else please provide feedback and let me know if thisis happening to them as well? This may be a issue with my web browserbecause I’ve had this happen before. Kudos

  3. Bethanie Darga

    Howdy this is somewhat of off topic but I was wanting to know if blogsuse WYSIWYG editors or if you have to manually code with HTML.I’m starting a blog soon but have no coding knowledge so Iwanted to get advice from someone with experience. Any help would be greatly appreciated!

Leave a Reply

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