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

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