Agregue comas a los números cada tres dígitos

160

¿Cómo puedo formatear números usando un separador de coma cada tres dígitos usando jQuery?

Por ejemplo:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
jquery number-formatting Steve
fuente
Soy nuevo en jQuery y me gustaría una función / complemento simple que solo agregue comas después de cada tres dígitos si los números tienen más de tres dígitos. Solo números positivos, sin fracciones, sin decimales, sin moneda involucrada, y el formato estándar de EE. UU. (1,111) no ($ 1,111 o $ 1,111.11). Preferiría haber terminado de usar jQuery y no solo javascript si es posible, y sería bueno establecer el conjunto de códigos en una función para que se pueda aplicar muy fácilmente. ¿Cómo hago para hacer eso? Apreciar la aportación de todos. Gracias de nuevo.
Steve
2
@unknown: ya tienes muchas respuestas. Mira las respuestas que has recibido y evalúalas para ver cuál es la mejor para ti. Si necesita más aclaraciones para una de las respuestas, publíquela como un comentario a esa respuesta.
Mark Byers
1
Lo siento, mi pregunta no fue lo suficientemente concisa, pero vea el formato del complemento Doug Neiner usando el código de Paul Creasey para la respuesta.
Steve

Respuestas:

241

@Paul Creasey tenía la solución más simple como regex, pero aquí está como un simple complemento jQuery:

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

Entonces podría usarlo así:

$("span.numbers").digits();
Doug Neiner
fuente
44
¡Funciona perfectamente! Gracias a Paul Creasey por un código simple y elegante y gracias a Doug Neiner por ponerlo en formato de complemento. Crédito otorgado a ambos.
Steve
44
RC @ Mark Byers La sintaxis es correcta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") devuelve' 999.9,999 'sin embargo.
bendewey
66
Hecho un ligero 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
3
Creo que esto sería más adecuado para una función de estilo de utilidad con espacio de nombre jQuery, por ejemplo $.digits = function() { ... };.
alex
63
La forma más rápida esnumber.toLocaleString("en");
Derek 朕 會 功夫
95

Podrías usar Number.toLocaleString():

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

Abhijeet
fuente
Lo he intentado, pero no estoy trabajando en el servidor en vivo, pero estoy trabajando en localhost ..
Abed Putra
1
@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp en todos los navegadores
ricks
Esto funcionó más fácil para mí. Necesitaba moneda y comas. También pude establecer propiedades: var n = 26787.89 var myObjCurrency = { style: "currency", currency: "USD", currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));
AWP
78

Algo como esto si te gusta la expresión regular, ¡no estás seguro de la sintaxis exacta para el reemplazo aunque!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
Paul Creasey
fuente
2
La sintaxis es correcta. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") devuelve' 999.9,999 'sin embargo.
Mark Byers
@ Desconocido, lo moví a una respuesta. Está más abajo en esta página con un ejemplo de uso.
Doug Neiner el
27

Podrías probar NumberFormatter .

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

También es compatible con diferentes configuraciones regionales, incluido, por supuesto, EE. UU.

Aquí hay un ejemplo muy simplificado de cómo 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>

Salida:

1,000
2,000,000
Mark Byers
fuente
Eché un vistazo a este complemento y, según la descripción del autor, estaba destinado a usarse en campos de entrada de formulario. ¿Cómo puedo adoptarlo para aplicarlo a <abarcan clase = "números"> 2984 </span> para que se formatee a <abarcan clase = "números"> 2,984 </span> sin decimales. Intenté $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); Pero no pasó nada. Todavía estoy examinando el complemento, jugando con él. Lo siento, soy un novato de jQuery :-)
Steve
+1 Genial saber sobre este complemento. Estoy de acuerdo en que para el crecimiento y la internacionalización futura, esta sería la mejor ruta a seguir.
Doug Neiner el
Aquí está el enlace a su repositorio de GitHub. github.com/hardhub/jquery-numberformatter
Mwangi Thiga
22

Esto no es jQuery, pero funciona para mí. Tomado de este sitio .

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;
}
Rayo
fuente
1
Muy "raíces" de ti :)
MonoThreaded
"Rootsy" puede ser, pero no creo que los otros enfoques sofisticados hubieran funcionado en mi situación, donde los datos están incrustados en un Canvas (Chart.JS). Pero agregar esa función y llamarla en el evento afterDraw () del gráfico funciona perfectamente: ctx.fillText (addCommas (dataset.data [i]),
B. Clay Shannon el
Esto no funciona, por ejemplo, 3000000 (7 dígitos). ¡solo para 6 y menos dígitos!
Mostafa Norzade
21

Use la función Número ();

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

bamossza
fuente
Gracias, usé tu respuesta. Vale la pena señalar que esto solo admite números de hasta 15 dígitos de longitud.
tallpaul
21

Respuesta 2016:

Javascript tiene esta función, por lo que no necesita Jquery.

yournumber.toLocaleString("en");
Kamy D
fuente
2
¿Funcionará en todos los navegadores? Está funcionando bien en cromo. ¿Funcionará en IE9 + y opera, safari?
zepelín
@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp es compatible con todos los navegadores
ricks
1
Solo asegúrese de que el número al que lo llama sea un tipo de número (int, float, etc.) y no una cadena.
el3ati2
16

Una solución más completa

El núcleo de esto es la replacellamada. Hasta ahora, no creo que ninguna de las soluciones propuestas maneje todos los siguientes casos:

  • Enteros: 1000 => '1,000'
  • Instrumentos de cuerda: '1000' => '1,000'
  • Para cuerdas:
    • Conserva ceros después del decimal: 10000.00 => '10,000.00'
    • Descarta los ceros a la izquierda antes del decimal: '01000.00 => '1,000.00'
    • No agrega comas después del decimal: '1000.00000' => '1,000.00000'
    • Conservas principales -o +:'-1000.0000' => '-1,000.000'
    • Devuelve, sin modificar, cadenas que no contienen dígitos: '1000k' => '1000k'

La siguiente función hace todo lo anterior.

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

Puede usarlo en un complemento jQuery como este:

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};
Nathan Long
fuente
9

También puede consultar el complemento jquery FormatCurrency (del cual soy el autor); también tiene soporte para múltiples configuraciones regionales, pero puede tener la sobrecarga del soporte de divisas que no necesita.

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
bendewey
fuente
44
esta pregunta me modificó para lanzar v1.3 de este complemento, así que gracias
bendewey
3

Aquí está mi javascript, probado solo en Firefox y 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>
Justicia
fuente
1

La forma muy fácil es usar la toLocaleString()función

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

tot.toLocaleString() //Result : Rs.1,402,598
Rifkan Razak
fuente
1 
function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

Puedes probar esto, me funciona

benoit1521
fuente