Adicione vírgula aos números a cada três dígitos

160

Como formatar números usando um separador de vírgula a cada três dígitos usando o jQuery?

Por exemplo:

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

jquery number-formatting

— Steve
fonte

Eu sou novo no jQuery e gostaria de uma função / plugin simples que apenas adicione vírgula após cada três dígitos se os números tiverem mais de três dígitos. Somente números positivos, sem frações, decimais, sem moeda envolvida e o formato padrão dos EUA (1.111) não (US $ 1.111 ou US $ 1.111,11). Eu preferiria ter feito usando jQuery e não apenas javascript, se possível, e seria bom definir o código definido como uma função para que possa ser aplicado com muita facilidade. Como faço para fazer isso? Aprecie a contribuição de todos. Obrigado novamente.

— Steve

2

@ desconhecido: Você já tem muitas respostas. Veja as respostas que recebeu e avalie-as para ver qual é a melhor para você. Se você precisar de mais esclarecimentos para uma das respostas, publique-a como um comentário nessa resposta.

— Mark Byers

1

Desculpe, minha pergunta não foi concisa o suficiente, mas veja o formato do plugin Doug Neiner usando o código de Paul Creasey para obter a resposta.

— Steve

241

@Paul Creasey tinha a solução mais simples como o regex, mas aqui está como um simples plugin jQuery:

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

Você poderia usá-lo assim:

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

— Doug Neiner
fonte

4

Funciona perfeitamente! Agradecemos a Paul Creasey pelo código simples e elegante e a Doug Neiner por colocá-lo no formato de plug-in. Crédito concedido a ambos.

— Steve

4

RC @Mark Byers A sintaxe está correta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1") retorna' 999,9.999 '.

— bendewey

6

Feito um ligeiro mod para campos de entrada:

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

— mpemburn 17/01/12

3

Eu acho que isso seria mais adequado para uma função de estilo utilitário utilitário espaçada pelo nome jQuery, por exemplo $.digits = function() { ... };.

— Alex

63

O caminho mais rápido énumber.toLocaleString("en");

— Derek 功夫會功夫

95

Você poderia usar Number.toLocaleString():

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

Expandir snippet

— Abhijeet
fonte

Eu tenho experimentá-lo, mas não funciona no servidor ao vivo, mas trabalhando em localhost ..

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp em todos os navegadores

— Ricks

Isso funcionou mais fácil para mim. Eu precisava de moeda e vírgulas. Também pude definir propriedades:

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

— AWP

78

Algo assim se você estiver em regex, não tem certeza da sintaxe exata para substituir tho!

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

— Paul Creasey
fonte

2

A sintaxe está correta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1") retorna' 999,9.999 '.

— Mark Byers

@Desconhecido, mudei para uma resposta. Está mais abaixo nesta página com o exemplo de uso.

— Doug Neiner

27

Você pode tentar NumberFormatter .

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

Ele também suporta diferentes localidades, incluindo, obviamente, os EUA.

Aqui está um exemplo muito simplificado de como usá-lo:

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

Resultado:

1,000
2,000,000

— Mark Byers
fonte

Dei uma olhada neste plugin e, a partir da descrição do autor, ele deveria ser usado nos campos de entrada do formulário. Como posso adotá-lo para ser aplicado a <span class = "numbers"> 2984 </span> para que ele seja formatado para <span class = "numbers"> 2.984 </span> sem decimais. Tentei $ ('span.numbers'). Format ({format: "#, ###", localidade: "us"}); mas nada aconteceu. Ainda está examinando o plugin, brincando com ele. Desculpe, eu sou um novato em jQuery :-)

— Steve

+1 É bom saber sobre este plugin. Concordo que, para o crescimento e a internacionalização futura, este seria o melhor caminho a seguir.

— Doug Neiner

Aqui está o link para seu repositório GitHub. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

Isso não é jQuery, mas funciona para mim. Retirado deste 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;
}

— Raio
fonte

1

Muito "raízes" de você :)

— MonoThreaded

Pode ser "raquítico", mas não acho que as outras abordagens sofisticadas funcionariam na minha situação, onde os dados são incorporados em um Canvas (Chart.JS). Mas acrescentando que função e chamá-lo em afterDraw do gráfico () evento funciona perfeitamente: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

Isso não funciona, por exemplo, 3000000 (7 dígitos). apenas para 6 e menos dígitos!

— Mostafa Norzade 02/09/19

21

Use a função 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 />

Expandir snippet

— bamossza
fonte

Obrigado, usei sua resposta. Vale a pena notar que isso suporta apenas números de até 15 dígitos.

— tallpaul

21

2016 Resposta:

Javascript tem essa função, portanto, não há necessidade de Jquery.

yournumber.toLocaleString("en");

— Kamy D
fonte

2

Isso funcionará em todos os navegadores? Está funcionando bem no chrome. Será que vai funcionar no IE9 + e ópera, safari?

— 22816 zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp suporta todos os navegadores

— Ricks

1

Apenas certifique-se de que o número chamado seja um tipo de número (int, float etc.) e não uma sequência.

— el3ati2 28/02

16

Uma solução mais completa

O núcleo disso é a replacechamada. Até agora, acho que nenhuma das soluções propostas lida com todos os seguintes casos:

Inteiros: 1000 => '1,000'
Cordas: '1000' => '1,000'
Para strings:
- Preserva zeros após decimal: 10000.00 => '10,000.00'
- Descarta zeros à esquerda antes do decimal: '01000.00 => '1,000.00'
- Não adiciona vírgulas após decimal: '1000.00000' => '1,000.00000'
- Preserva a liderança -ou +:'-1000.0000' => '-1,000.000'
- Retorna cadeias não modificadas que não contêm dígitos: '1000k' => '1000k'

A função a seguir faz todas as ações acima.

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

Você poderia usá-lo em um plugin jQuery como este:

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

— Nathan Long
fonte

9

Você também pode olhar para o plugin jquery FormatCurrency (do qual sou o autor); também possui suporte para vários códigos de idioma, mas pode ter a sobrecarga do suporte de moeda que você não precisa.

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

— Bendewey
fonte

4

esta pergunta me modivated para liberar v1.3 deste plugin, por isso obrigado

— bendewey

3

Aqui está o meu javascript, testado apenas no 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

Maneira muito fácil é usar a toLocaleString()função

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

Você pode tentar isso, funciona para mim

— benoit1521
fonte