Ajouter une virgule aux nombres tous les trois chiffres

160

Comment puis-je formater des nombres en utilisant un séparateur virgule tous les trois chiffres en utilisant jQuery?

Par exemple:

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

jquery number-formatting Steve
la source

Je suis nouveau sur jQuery et je voudrais une fonction / plugin simple qui ajoute simplement une virgule tous les trois chiffres si les nombres comportent plus de trois chiffres. Nombres positifs uniquement, pas de fractions, pas de décimales, pas de devise impliquée et format américain standard (1111) pas (1111 $ ou 1111,11 $). Je préférerais utiliser jQuery et pas seulement javascript si possible et je serais bien de définir le code défini sur une fonction afin qu'il puisse être appliqué très facilement. Comment dois-je procéder? Appréciez la contribution de chacun. Merci encore.

Steve le

2

@unknown: Vous avez déjà de nombreuses réponses. Regardez les réponses que vous avez reçues et évaluez-les pour voir laquelle vous convient le mieux. Si vous avez besoin de plus de précisions sur l'une des réponses, postez-la comme commentaire à cette réponse.

Mark Byers

1

Désolé ma question n'était pas assez concise mais voyez le format du plugin Doug Neiner utilisant le code de Paul Creasey pour la réponse.

Steve le

241

@Paul Creasey avait la solution la plus simple comme regex, mais ici c'est comme un simple plugin jQuery:

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

Vous pouvez ensuite l'utiliser comme ceci:

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

Doug Neiner
la source

4

Fonctionne parfaitement! Merci à Paul Creasey pour le code simple et élégant et merci à Doug Neiner pour l'avoir mis au format plugin. Crédit accordé aux deux.

Steve le

4

RC @Mark Byers La syntaxe est correcte. '999,9999'. Remplacer (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") renvoie cependant '999,9 999'.

bendewey le

6

Fait un léger mod pour les champs de saisie:

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

mpemburn

3

Je pense que cela conviendrait mieux à une fonction de style utilitaire jQuery espacée par nom, par exemple $.digits = function() { ... };.

alex le

63

Le moyen le plus rapide estnumber.toLocaleString("en");

Derek 朕會功夫

95

Vous pouvez utiliser Number.toLocaleString():

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

Développer l'extrait

Abhijeet
la source

Je l'ai essayé, mais je ne travaille pas sur le serveur en direct, mais je travaille sur localhost ..

Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp dans tous les navigateurs

ricks

Cela a fonctionné le plus facilement pour moi. J'avais besoin de monnaie et de virgules. J'ai également pu définir les propriétés:

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

AWP

78

Quelque chose comme ça si vous êtes dans regex, pas sûr de la syntaxe exacte pour le tho de remplacement!

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

Paul Creasey
la source

2

La syntaxe est correcte. '999,9999'. Remplacer (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") renvoie cependant '999,9 999'.

Mark Byers le

@ Inconnu, je l'ai déplacé vers une réponse. C'est plus bas sur cette page avec un exemple d'utilisation.

Doug Neiner le

27

Vous pouvez essayer NumberFormatter .

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

Il prend également en charge différents paramètres régionaux, y compris bien sûr les États-Unis.

Voici un exemple très simplifié de son utilisation:

<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>

Production:

1,000
2,000,000

Mark Byers
la source

J'ai jeté un coup d'œil à ce plugin et à partir de la description de l'auteur, il était destiné à être utilisé dans les champs de saisie de formulaire. Comment puis-je l'adopter pour qu'il soit appliqué à <span class = "numbers"> 2984 </span> afin qu'il soit formaté en <span class = "numbers"> 2 984 </span> sans décimales. J'ai essayé $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); mais rien ne s'est passé. Je suis toujours en train d'examiner le plugin, je joue avec. Désolé, je suis un débutant jQuery :-)

Steve

+1 Bon à savoir sur ce plugin. Je conviens que pour la croissance et l'internationalisation future, ce serait la meilleure voie à suivre.

Doug Neiner le

Voici le lien vers son repo GitHub. github.com/hardhub/jquery-numberformatter

Mwangi Thiga

22

Ce n'est pas jQuery, mais cela fonctionne pour moi. Tiré de ce site .

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;
}

Rayon
la source

1

Très "roots" of you :)

MonoThreaded

"Rootsy" c'est peut-être, mais je ne pense pas que les autres approches sophistiquées auraient fonctionné dans ma situation, où les données sont intégrées dans un Canvas (Chart.JS). Mais ajouter cette fonction et l'appeler dans l'événement afterDraw () du graphique fonctionne parfaitement: ctx.fillText (addCommas (dataset.data [i]),

B. Clay Shannon

Cela ne fonctionne pas par exemple 3000000 (7 chiffres). seulement pour 6 chiffres et moins!

Mostafa Norzade

21

Utilisez la fonction Number ();

$(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 />

Développer l'extrait

Bamossza
la source

Merci, j'ai utilisé votre réponse. Il peut être intéressant de noter que cela ne prend en charge que les nombres jusqu'à 15 chiffres de longueur.

tallpaul

21

Réponse de 2016:

Javascript a cette fonction, donc pas besoin de Jquery.

yournumber.toLocaleString("en");

Kamy D
la source

2

Cela fonctionnera-t-il sur tous les navigateurs? Cela fonctionne très bien sur le chrome. Fonctionnera-t-il sur IE9 + et opéra, safari?

zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp prend en charge tous les navigateurs

ricks

1

Assurez-vous simplement que le numéro sur lequel vous l'appelez est un type de nombre (int, float, etc.) et non une chaîne.

el3ati2 le

16

Une solution plus approfondie

Le cœur de tout cela est l' replaceappel. Jusqu'à présent, je ne pense pas qu'aucune des solutions proposées gère tous les cas suivants:

Entiers: 1000 => '1,000'
Cordes: '1000' => '1,000'
Pour les chaînes:
- Conserve les zéros après la virgule: 10000.00 => '10,000.00'
- Supprime les zéros non significatifs avant la virgule: '01000.00 => '1,000.00'
- N'ajoute pas de virgule après la virgule: '1000.00000' => '1,000.00000'
- Préserve le plomb -ou +:'-1000.0000' => '-1,000.000'
- Renvoie, non modifiées, des chaînes contenant des non-chiffres: '1000k' => '1000k'

La fonction suivante fait tout ce qui précède.

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));
    }
  );
};

Vous pouvez l'utiliser dans un plugin jQuery comme celui-ci:

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

Nathan Long
la source

9

Vous pouvez également consulter le plugin jquery FormatCurrency (dont je suis l'auteur); il prend également en charge plusieurs paramètres régionaux, mais peut avoir la charge de la prise en charge des devises dont vous n'avez pas besoin.

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

Bendewey
la source

4

cette question m'a amené à publier la v1.3 de ce plugin, alors merci

bendewey

3

Voici mon javascript, testé sur firefox et chrome uniquement

<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
la source

1

Un moyen très simple consiste à utiliser la toLocaleString()fonction

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

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

Rifkan Razak
la source

1

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

Tu peux essayer ça, ça marche pour moi

benoit1521
la source

Ajouter une virgule aux nombres tous les trois chiffres

Réponses:

Une solution plus approfondie