Home » Jquery » format – Add commas every 3 digit on jquery script-Exceptionshub

format – Add commas every 3 digit on jquery script-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:
<div>
  <h2>    Total Steps:  <span id="steps" class="commas"></span></h2>
</div>
<script>

        var from_date       = new Date("2020-01-01 00:00:00") /1000;
        var now             = Date.now() / 1000;
        var year2020        = now - from_date;

        var speed = 100;


        // Random Meter
    $(document).ready(function () {
        go();
        setInterval(function () {
            go();
        }, speed);
    });
            var random_increment = Math.floor((Math.random() * 5) + 5);
    function go() {
        $("#steps").html(year2020.toFixed(0));
        year2020 += random_increment;
    }   

</script>

It’s Output like:

Total Steps: 3943958(increasing).

Now I want to include comma for every 3 digit and I found a code

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}   

So, how can I get output like

Total Steps: 3,943,958(increasing every second)

?

Thanks,

How to&Answer:

If you have to use the $.fn.digits method, call .digits() after setting the .html of the #steps element:

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  $("#steps")
    .html(year2020.toFixed(0))
    .digits();
  year2020 += random_increment;
}

$.fn.digits = function() {
  return this.each(function() {
    $(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  })
}

go();
setInterval(go, speed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

But it would be simpler to call .replace directly on the year2020.toFixed string:

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  const newStr = year2020
    .toFixed()
    .replace(/\d(?=(?:\d{3})+(?!\d))/g, "$&,");
  $("#steps").text(newStr);
  year2020 += random_increment;
}

go();
setInterval(go, speed);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

Note that:

  • Since the #steps element is meant to contain just plain text, .text is more appropriate than .html
  • toFixed‘s argument defaults to 0: there’s no need to explicitly pass 0.
  • There’s no need for the regular expression to use a capture group – since the whole match is just the single digit, you don’t need to capture it, you can use $& to replace with that digit
  • Repeated tokens in a regular expression can be made less repetitive with a quantifier – eg \d\d\d can be substituted with \d{3}, in the spirit of being DRY
  • The go function is the function you want to call on every interval, so you can just pass go to setInterval (no need to wrap it in another function)