JavaScript counter in html - some minor changes

Question

I have this JavaScript and HTML code which work together to form a live counter when the webpage loads:

// number count for stats, using jQuery animate

$('.counting').each(function(countStats) {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 3000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  
  

});

That JavaScript works in conjunction with this HTML code:

<section id="counter-stats" class="wow fadeInRight" data-wow-duration="1.4s">
    <div class="container">
        <div class="row">

            <div class="col-lg-3 stats">
                <i class="fas fa-bible" aria-hidden="true"></i>
                <div class="counting" data-count="1800">0</div><span class="plusOne">+</span>
                <h5>Bibles and documents available</h5>
            </div>

            <div class="col-lg-3 stats">
                <i class="fas fa-language" aria-hidden="true"></i>
                <div class="counting" data-count="700">0</div><span class="plusTwo">+</span>
                <h5>Module languages</h5>
            </div>

            <div class="col-lg-3 stats">
                <i class="fas fa-users" aria-hidden="true"></i>
                <div class="counting" data-count="150000">0</div><span class="plusThree">+</span>
                <h5>Users worldwide</h5>
            </div>

            <div class="col-lg-3 stats">
                <i class="fas fa-mobile-alt" aria-hidden="true"></i>
                <div class="counting" data-count="1">0</div>
                <h5>Amazing Bible app</h5>
            </div>


        </div>
        <!-- end row -->
    </div>
    <!-- end container -->

What I would like to do is make two minor changes. Firstly, I want to place a plus sign (+) after each counter value. Second, I would like to place a comma (,) where needed in each counter value. So it should look like the following:

1,800+
700+
150,000+

Instead of the current

1800
700
150000

I would like to make these two changes by JS, as I cannot change the CSS which restricts the placement of these characters in HTML.

Also, I would prefer it not to look with these characters awkward as the values amount dynamically.

As far as adding a `+` symbol, just add it on: `$this.text(this.countNum + '+');` — Heretic Monkey, Sep 29 '21 at 16:35
The only problem with that code snippet is that it also adds a plus sign after the last number, 1 Bible App, so it says 1+ Bible App. That is unacceptable and inappropriate for my current need. So how can I hide the plus sign for the last stat, while showing it for the first three? — Bryce Steuer, Sep 29 '21 at 20:19
Well, the [`each`](https://api.jquery.com/each/) function takes the index of the element (what you have labeled `countStats`). When it gets to `$(".counting").length - 1` you know you're on the last one to print. — Heretic Monkey, Sep 29 '21 at 20:35

score 0 · Answer 1 · answered Sep 29 '21 at 16:31

Should be easy if you use RegEx (Regular Expressions).

function prettyPrintNumber(num) {
    let numAsStr = num + ""; // converts number to string
    numToStr.replaceAll(/(\d)(?=(\d{3})+$)/g, "$1,"); // splits every 3 digits
    return numToStr + "+"; // adds a plus regardless of length
}

The regex expression is taken from @toolkit for a simmilar question.

A nice RegEx playground to test it out is regex101.com.

Just call this function inside of $this.text() and give it the parameter Math.floor(...).

No need for regex; just use `toLocaleString()`; see [this answer in the duplicate](https://stackoverflow.com/a/17663871/215552). — Heretic Monkey, Sep 29 '21 at 16:37

JavaScript counter in html - some minor changes

1 Answers1