CODEWITHSUNDEEP
javascriptjquery
Jozo
Jozo

Reputation: 121

How to add spaces separating thousands in Javascript in this example

I have two functions here. One that adds a "," for separating thousands, like 1234 -> 1 234. And one function for increasing.

The function for increasing is just printing 123456 and I would like to combine these, I though I could just change:

$this.html(++current);

to: $this.html(addSpaces(++current));

But it's not working. Please help me, how can I fix this?

function addSpaces(nStr)
{
    nStr += "";
    x = nStr.split(".");
    x1 = x[0];
    x2 = x.length > 1 ? "." + x[1] : "";
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, "$1" + " " + "$2");
    }
    return x1 + x2;
}   


function count($this) {

    var current = parseInt($this.html(), 10);
    current = current + 13 /* This is increment */

    $this.html(++current);
    if (current > $this.data("count")) {
        $this.html($this.data("count"));
    } else {
        setTimeout(function() { count($this); }, 100);
    }

}

Upvotes: 2

Views: 7631

Answers (3)

axelduch
axelduch

Reputation: 10849

UPDATE I modified your jsfiddle

As current will be parsed again and again from your formatted value, we need to remove spaces from it

current = parseInt(($this.html()).split(' ').join(''), 10)

Also, you need to keep a trace of the string value of the incremented current, under a variable named nextString

You want your number grouped by, at most, 3 digits. The thing is, you may have a remainder if 3 does not divide your string's length. Once you isolate the remainder part of your string (left most) you can group all the others by 3.

DEMO

function addSpaces(nStr)
{
    var remainder = nStr.length % 3;
    return (nStr.substr(0, remainder) + nStr.substr(remainder).replace(/(\d{3})/g, ' $1')).trim();
}

function count($this) {

    var current = parseInt(($this.html()).split(' ').join(''), 10),
        nextString = (current+13) + '';

    $this.html(addSpaces(nextString));

    if (current > $this.data("count")) {
        $this.html($this.data("count"));
    } else {
        setTimeout(function() {
            count($this);

        }, 100);
    }

}

Upvotes: 3

Elfayer
Elfayer

Reputation: 4571

Or You could use things like toLocaleString() if that's what you want :

var number = 3500;

console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale

var number = 123456.789;

// German uses comma as decimal separator and period for thousands
alert(number.toLocaleString("de-DE"));
// → 123.456,789

// Arabic in most Arabic speaking countries uses real Arabic digits
alert(number.toLocaleString("ar-EG"));
// → ١٢٣٤٥٦٫٧٨٩

// India uses thousands/lakh/crore separators
alert(number.toLocaleString("en-IN"));
// → 1,23,456.789

// the nu extension key requests a numbering system, e.g. Chinese decimal
alert(number.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
// → 一二三,四五六.七八九

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
alert(number.toLocaleString(["ban", "id"]));
// → 123.456,789

See : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Upvotes: 2

Hüseyin BABAL
Hüseyin BABAL

Reputation: 15550

First one works, and you can use following for second one;

<div class="count">1234</div>

And js;

$(".count").on("click", function() {
        $this = $(this);
        var current = parseInt($this.html(), 10);
        current = current + 13 /* This is increment */
        $this.html(++current);
        if (current > $this.data("count")) {
            $this.html($this.data("count"));
        } else {
            setTimeout(function() { count($this); }, 100);
        }    
    });

Here is working demo: Demo (Click on first div on demo)

Upvotes: 0

Related Questions