Aggiungi una virgola ai numeri ogni tre cifre

160

Come posso formattare i numeri usando un separatore di virgola ogni tre cifre usando jQuery?

Per esempio:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝

jquery number-formatting

— Steve
fonte

Sono nuovo di jQuery e vorrei una semplice funzione / plug-in che aggiunge virgola dopo ogni tre cifre se i numeri sono più lunghi di tre cifre. Solo numeri positivi, nessuna frazione, nessun decimale, nessuna valuta coinvolta e formato USA standard (1.111) non ($ 1.111 o $ 1.111,11). Preferirei aver fatto usando jQuery e non solo JavaScript se possibile e sarebbe bello impostare il codice impostato su una funzione in modo che possa essere applicato molto facilmente. Come faccio a farlo? Apprezzo l'input di tutti. Grazie ancora.

— Steve

2

@unknown: hai già molte risposte. Guarda le risposte che hai ricevuto e valutale per vedere quale è la migliore per te. Se hai bisogno di ulteriori chiarimenti per una delle risposte, pubblicalo come commento a quella risposta.

— Mark Byers,

1

Mi dispiace che la mia domanda non sia stata abbastanza concisa, ma vedi il formato del plugin Doug Neiner usando il codice di Paul Creasey per la risposta.

— Steve

241

@Paul Creasey aveva la soluzione più semplice come regex, ma qui è come un semplice plugin jQuery:

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

È quindi possibile utilizzarlo in questo modo:

$("span.numbers").digits();

— Doug Neiner
fonte

4

Funziona perfettamente! Grazie a Paul Creasey per il codice semplice ed elegante e grazie a Doug Neiner per averlo messo in formato plugin. Credito dato ad entrambi.

— Steve

4

RC @Mark Byers La sintassi è corretta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") restituisce comunque "999.99.999".

— Bendewey,

6

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

— Modificato

3

Penso che questo sarebbe più adatto a una funzione di stile di utilità spaziata dal nome jQuery, ad es $.digits = function() { ... };.

— alex,

63

Il modo più veloce ènumber.toLocaleString("en");

— Derek 朕會功夫

95

Puoi usare Number.toLocaleString():

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534

Espandi frammento

— Abhijeet
fonte

Ci ho provato, ma non lavorando su server live, ma lavorando su localhost ..

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp in tutti i browser

— ricks

Questo ha funzionato nel modo più semplice per me. Avevo bisogno di valuta e virgole. Sono stato anche in grado di impostare le proprietà:

var n = 26787.89 var myObjCurrency = {   style: "currency",   currency: "USD",   currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));

— AWP

78

Qualcosa del genere se ti piace regex, non sei sicuro dell'esatta sintassi per la sostituzione!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

— Paul Creasey
fonte

2

La sintassi è corretta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") restituisce comunque "999.99.999".

— Mark Byers,

@Sconosciuta, l'ho spostato in una risposta. È più in basso in questa pagina con un esempio di utilizzo.

— Doug Neiner,

27

Puoi provare NumberFormatter .

$(this).format({format:"#,###.00", locale:"us"});

Supporta anche locali diversi, compresi ovviamente gli Stati Uniti.

Ecco un esempio molto semplificato di come usarlo:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.numberformatter.js"></script>
        <script>
        $(document).ready(function() {
            $(".numbers").each(function() {
                $(this).format({format:"#,###", locale:"us"});
            });
        });
        </script>
    </head>
    <body>
        <div class="numbers">1000</div>
        <div class="numbers">2000000</div>
    </body>
</html>

Produzione:

1,000
2,000,000

— Mark Byers
fonte

Ho dato un'occhiata a questo plugin e dalla descrizione dell'autore, doveva essere utilizzato nei campi di input del modulo. Come posso adottarlo per essere applicato a <span class = "numeri"> 2984 </span> in modo che formatta su <span class = "numeri"> 2.984 </span> senza decimali. Ho provato $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); ma non è successo niente. Plugin ancora examing, giocandoci attorno. Mi dispiace, sono un principiante di jQuery :-)

— Steve

+1 Ottimo da sapere su questo plugin. Concordo sul fatto che per la crescita e la futura internazionalizzazione, questa sarebbe la strada migliore da seguire.

— Doug Neiner,

Ecco il link al suo repository GitHub. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

Questo non è jQuery, ma funziona per me. Tratto da questo sito .

function addCommas(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;
}

— raggio
fonte

1

Molto "radici" di te :)

— MonoThreaded

"Rootsy" potrebbe essere, ma non credo che gli altri approcci di fantasia avrebbero funzionato nella mia situazione, in cui i dati sono incorporati in una tela (Chart.JS). Ma aggiungere quella funzione e chiamarla nell'evento afterDraw () del grafico funziona perfettamente: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon,

Questo non funziona ad esempio 3000000 (7 cifre). solo per 6 e meno cifre!

— Mostafa Norzade,

21

Utilizzare la funzione Numero ();

$(function() {

  var price1 = 1000;
  var price2 = 500000;
  var price3 = 15245000;

  $("span#s1").html(Number(price1).toLocaleString('en'));
  $("span#s2").html(Number(price2).toLocaleString('en'));
  $("span#s3").html(Number(price3).toLocaleString('en'));

  console.log(Number(price).toLocaleString('en'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="s1"></span><br />
<span id="s2"></span><br />
<span id="s3"></span><br />

Espandi frammento

— bamossza
fonte

Grazie, ho usato la tua risposta. Vale la pena notare che questo supporta solo numeri lunghi fino a 15 cifre.

— tallpaul

21

Risposta 2016:

Javascript ha questa funzione, quindi non c'è bisogno di Jquery.

yournumber.toLocaleString("en");

— Kamy D
fonte

2

Funzionerà su tutti i browser? Funziona benissimo su Chrome. Funzionerà su IE9 + e opera, safari?

— Zeppelin,

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp supporta tutti i browser

— ricks

1

Assicurati solo che il numero su cui lo chiami sia un tipo di numero (int, float, ecc.) E non una stringa.

— el3ati2,

16

Una soluzione più approfondita

Il nucleo di questo è la replacechiamata. Finora, non credo che nessuna delle soluzioni proposte gestisca tutti i seguenti casi:

Interi: 1000 => '1,000'
Stringhe: '1000' => '1,000'
Per archi:
- Conserva gli zeri dopo i decimali: 10000.00 => '10,000.00'
- Elimina gli zeri iniziali prima dei decimali: '01000.00 => '1,000.00'
- Non aggiunge le virgole dopo il decimale: '1000.00000' => '1,000.00000'
- Preserva leader -o +:'-1000.0000' => '-1,000.000'
- Restituisce stringhe non modificate contenenti non cifre: '1000k' => '1000k'

La seguente funzione svolge tutto quanto sopra.

addCommas = function(input){
  // If the regex doesn't match, `replace` returns the string unmodified
  return (input.toString()).replace(
    // Each parentheses group (or 'capture') in this regex becomes an argument 
    // to the function; in this case, every argument after 'match'
    /^([-+]?)(0?)(\d+)(.?)(\d+)$/g, function(match, sign, zeros, before, decimal, after) {

      // Less obtrusive than adding 'reverse' method on all strings
      var reverseString = function(string) { return string.split('').reverse().join(''); };

      // Insert commas every three characters from the right
      var insertCommas  = function(string) { 

        // Reverse, because it's easier to do things from the left
        var reversed           = reverseString(string);

        // Add commas every three characters
        var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');

        // Reverse again (back to normal)
        return reverseString(reversedWithCommas);
      };

      // If there was no decimal, the last capture grabs the final digit, so
      // we have to put it back together with the 'before' substring
      return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
    }
  );
};

Puoi usarlo in un plugin jQuery come questo:

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};

— Nathan Long
fonte

9

Puoi anche guardare il plugin jquery FormatCurrency (di cui io sono l'autore); ha anche il supporto per più locali, ma potrebbe avere il sovraccarico del supporto valutario che non ti serve.

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });

— bendewey
fonte

4

questa domanda mi ha motivato a rilasciare v1.3 di questo plugin, quindi grazie

— bendewey

3

Ecco il mio javascript, testato solo su Firefox e Chrome

<html>
<header>
<script>
    function addCommas(str){
        return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function test(){
        var val = document.getElementById('test').value;
        document.getElementById('test').value = addCommas(val);
    }
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>

— Lam
fonte

1

Il modo molto semplice è usare la toLocaleString()funzione

tot = Rs.1402598 //Result : Rs.1402598

tot.toLocaleString() //Result : Rs.1,402,598

— Rifkan Razak
fonte

1

function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

Puoi provare questo, funziona per me

— benoit1521
fonte