Agregar coma para los números de cada tres dígitos

¿Cómo puedo dar formato a los números utilizando un separador de coma cada tres dígitos usando jQuery?

Por ejemplo:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
  • Soy nuevo en jQuery y me gustaría una simple función/plugin que sólo se agrega coma después de cada tres dígitos, si los números son más de tres dígitos. Los números positivos, sin fracciones, sin decimales, ninguna moneda involucrados, estándar y de formato americano (1,111) no ($1,111 o $1,111.11). Preferiría haber hecho uso de jQuery y no sólo de javascript si es posible y sería bueno establecer el conjunto de código para una función, con lo que se puede aplicar muy fácilmente. ¿Cómo puedo hacerlo? Apreciar los aportes de todos. Gracias de nuevo.
  • Ya tienes muchas respuestas. Mira las respuestas que han recibido y evaluarlos para ver cual es mejor para usted. Si usted necesita más aclaraciones para una de las respuestas, puesto que como un comentario a la respuesta.
  • Lo siento, mi pregunta no fue lo suficientemente concisa para pero ver a Doug Neiner plugin formato Pablo Creasey del código de la respuesta.
InformationsquelleAutor Steve | 2010-01-02

11 Kommentare

  1. 228

    @Pablo Creasey tenía la solución más simple como el regex, pero aquí es como un simple plugin de jQuery:

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

    Usted podría usar algo como esto:

    $("span.numbers").digits();
    • Funciona a la perfección! Gracias a Pablo Creasey para, simplemente, el código elegante y gracias a Doug Neiner para ponerlo en formato de plugin. El crédito otorgado a ambos.
    • RC @Mark Byers La sintaxis es correcta. ‘999.9999’.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, «$1,») devuelve ‘999.9,999’ aunque.
    • el OP no actualización de su pregunta, sino que se añade este comentario: «los números Positivos, sin fracciones, sin decimales, ninguna moneda involucrados, estándar y de formato americano» que @Pablo Creasey la respuesta de siempre.
    • Hizo una leve mod para los campos de entrada: $.fn.digits = function(){ return this.each(function(){ $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); }) }
    • Creo que esto sería más adecuado para un jQuery nombre de espacio de la utilidad de estilo de función, por ejemplo,$.digits = function() { ... };.
    • La forma más rápida es number.toLocaleString("en");
    • function addCommas(t) {return String(t).replace(/(\d)(?=(\d{3})+$)/g, "$1,")}. fuente: http://icompile.eladkarako.com/javascript-snippet-add-commas-to-number-by-regular-expression/
    • javvascript tiene una función para esto…..<script>el documento.escribir(num.toLocaleString(«en-US»));</script>
    • Por alguna razón, este método agrega 1 para mi total. Pero el uso de number.toLocaleString("en"); funcionó a la perfección.

  2. 80

    Usted podría utilizar Número.toLocaleString():

    JS:

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

    • He intentado, pero no funciona en el servidor en vivo, pero el trabajo en localhost..
    • href=»https://www.w3schools.com/jsref/jsref_tolocalestring.asp» >w3schools.com/jsref/jsref_tolocalestring.asp en todos los navegadores
  3. 75

    Algo como esto si estás en el regex, no estoy seguro de la sintaxis exacta para reemplazar tho!

    MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    • La sintaxis es correcta. ‘999.9999’.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, «$1,») devuelve ‘999.9,999’ aunque.
    • Me mudé a una respuesta. Que está más abajo en esta página con el ejemplo de uso.
  4. 27

    Usted podría tratar de NumberFormatter.

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

    También admite diferentes configuraciones, incluyendo por supuesto a NOSOTROS.

    He aquí 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>

    De salida:

    1,000
    2,000,000
    • Me tomó un vistazo a este plugin y de autor, descripción, que estaba destinado a ser utilizado en forma de campos de entrada. ¿Cómo puedo adoptar a ser aplicado a <span class=»números»>2984</span> por lo que los formatos de <span class=»números»>2,984</span> sin decimales. Traté de $(‘span.los números’).formato({formato:»#,###», locale:»nosotros»}); pero nada ha pasado. Todavía examinar plugin, jugando con ella. Lo siento, soy un jQuery novato 🙂
    • +1 Gran saber acerca de este plugin. Estoy de acuerdo en que para el crecimiento y el futuro de la internacionalización, esta sería la mejor ruta a seguir.
    • Aquí está el enlace a su repo de GitHub. github.com/hardhub/jquery-numberformatter
  5. 21

    Esto no es jQuery, pero a mí me funciona. 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;
    }
    • Muy «raíces» de usted 🙂
    • «Sabroso» puede ser, pero no creo que los otros de fantasía-pantalón enfoques que han trabajado en mi situación, donde los datos están incrustados en un Lienzo (Chart.JS). Pero añadiendo que la función y llamarla en el gráfico de la afterDraw() el evento funciona perfectamente: ctx.fillText(addCommas(conjunto de datos.datos[i]),
    • Esto no funciona por ejemplo 3000000 (7 dígitos). sólo para 6 y menos dígitos !
  6. 19

    2016 Respuesta:

    Javascript tiene esta función, así que no hay necesidad de Jquery.

    yournumber.toLocaleString("en");
    • En este trabajo en todos los navegadores? Se está trabajando muy bien en chrome. Funciona en IE9+ & opera, safari ?
    • href=»https://www.w3schools.com/jsref/jsref_tolocalestring.asp» >w3schools.com/jsref/jsref_tolocalestring.asp soporta todos los navegadores
  7. 18

    El uso de Número de función();

    JS:

    $(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'));
    
    });

    HTML:

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

    • Gracias, he utilizado tu respuesta. Valdría la pena señalar que esto sólo admite números de hasta 15 dígitos de longitud.
  8. 16

    Una más completa solución

    El núcleo de este es el replace llamada. Hasta ahora, no creo que ninguna de las soluciones propuestas manejar todos de los siguientes casos:

    • Enteros: 1000 => '1,000'
    • Cadenas: '1000' => '1,000'
    • Para las cadenas:
      • Conserva ceros después del decimal: 10000.00 => '10,000.00'
      • Descartes ceros a la izquierda antes de decimales: '01000.00 => '1,000.00'
      • No agregar comas después de decimales: '1000.00000' => '1,000.00000'
      • Conserva líder en - o +: '-1000.0000' => '-1,000.000'
      • Devuelve, sin modificar, las cadenas que no contienen dígitos: '1000k' => '1000k'

    La siguiente función de 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));
        }
      );
    };

    Que se podría utilizar en un plugin de jQuery como este:

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

    También puede buscar en el jquery FormatCurrency plugin (de los cuales yo soy el autor); tiene soporte para múltiples configuraciones regionales así, pero puede tener la sobrecarga de la compatibilidad de la moneda que usted no necesita.

    $(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
    • esta pregunta modivated me la liberación de v1.3 de este plugin, así que gracias
  10. 3

    Aquí está mi javascript, probado en firefox y chrome solo

    <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>
  11. 0

    Manera muy Fácil es utilizar toLocaleString() función

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea