agregar comas a un número en jQuery

82

Tengo estos numeros

10999y 8094y456

Y todo lo que quiero hacer es agregar una coma en el lugar correcto si lo necesita para que se vea así

10,999y 8,094y456

Estos están todos dentro de una etiqueta ap como esta, <p class="points">10999</p>etc.

Se puede hacer?

Lo intenté aquí con la ayuda de otras publicaciones http://jsfiddle.net/pdWTU/1/ pero parece que no puedo hacer que funcione

Gracias

Jamie

ACTUALIZAR

Me equivoqué un poco y logré resolverlo aquí http://jsfiddle.net/W5jwY/1/

Vamos a ver el nuevo complemento de globalización para una mejor manera de hacerlo

Gracias

Jamie

Jamie Taylor
fuente
4
Pregunta relacionada aquí: stackoverflow.com/questions/2901102/…
epascarello
3
+1 para tu violín. Debe incluir su solución en su actualización:<number string>.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
zhon
2
Ojalá pudiera +100 para su solución: Regex diciendo Sin límite de palabra seguido de una mirada positiva delante de 3 dígitos posiblemente repetidos no seguidos de un dígito. ¡Increíble!
zhon
Esta solución fue la mejor en su mayor parte, pero no funcionó para mí. Desafortunadamente, necesito mostrar números con 4 y, a veces, 5 posiciones decimales. Las personas para las que trabajo se ocupan de un alto número de transacciones y fracciones de un centavo suman $ 100 o $ 1000 de dólares (piense en Office Space). Acabo de colocar un código en su violín para permitirle manejar posiciones decimales más allá de 3: http://jsfiddle.net/W5jwY/554/
Josh Bilderback
Respuesta real a esta pregunta aquí: stackoverflow.com/a/2632502/1860982
Tosin Onikute

Respuestas:

138

Funciona en todos los navegadores, esto es todo lo que necesita.

  function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
  }

Escribí esto para que sea compacto, y al grano, gracias a regex. Este es JS directo, pero puede usarlo en su jQuery así:

$('#elementID').html(commaSeparateNumber(1234567890));

o

$('#inputID').val(commaSeparateNumber(1234567890));
Timothy perez
fuente
4
La respuesta de user1655655 es mucho mejor
Pirolístico
10
¡Me gustan las tortugas!
Timothy Perez
7
Dos problemas con esta respuesta: 1. Llamar a la función más de una vez con el mismo valor resultará en comas en los lugares incorrectos (por ejemplo, eventos keyup). 2. Esta función no maneja los decimales correctamente y agregará comas dentro de los decimales. Consulte este JSFiddle para obtener una versión modificada que corrige ambos.
baacke
1
@baacke La idea de esta función es ser delgada, por lo que no tuve en cuenta la posibilidad de llamarla dos veces con la misma var o decimales (ya que no estaba en la pregunta). De cualquier manera, su ejemplo de violín es útil para los casos en los que necesitaría un decimal, así que gracias.
Timothy Perez
El lugar donde aparece una coma o un punto lo determina la configuración regional. La biblioteca estándar JS ya puede hacer esto por usted. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Alex Harvey
130
Number(10000).toLocaleString('en');  // "10,000"
sonnenhaft
fuente
6
Esta es la solución más simple y funciona perfectamente para mí. ¡Gracias!
Buen
3
gracias por esa sugerencia, mucho mejor que escribir funciones personalizadas o incluir un complemento. para mi respuesta # 1!
linqu
5
Esto es genial y funciona en la mayoría de los navegadores de escritorio, pero tenga en cuenta que en este momento es limitado el soporte en los navegadores móviles ... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Luke
2
Para cualquiera que busque usar esto con Node.js, no funcionará a menos que vuelva a compilar el motor v8 para incluir i18n: stackoverflow.com/questions/23571043/…
Tom Spencer
3
Esto es inconsistente en todos los navegadores y no funciona en absoluto en iPad.
Isaac Askew
3

La respuesta de Timothy Pirez fue muy correcta, pero si necesita reemplazar los números con comas Inmediatamente mientras el usuario escribe en el campo de texto, es posible que desee usar la función Keyup.

      $('#textfield').live('keyup', function (event) {
        var value=$('#textfield').val();

      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var newvalue=value.replace(/,/g, '');   
      var valuewithcomma=Number(newvalue).toLocaleString('en');   
      $('#textfield').val(valuewithcomma); 

      });

    <form><input type="text" id="textfield" ></form>
Tosin Onikute
fuente
1

Eche un vistazo a Numeral.js . Puede formatear números, moneda, porcentajes y tiene soporte para la localización.

Adamwdraper
fuente
1
    function delimitNumbers(str) {
      return (str + "").replace(/\b(\d+)((\.\d+)*)\b/g, function(a, b, c) {
        return (b.charAt(0) > 0 && !(c || ".").lastIndexOf(".") ? b.replace(/(\d)(?=(\d{3})+$)/g, "$1,") : b) + c;
      });
    }

    alert(delimitNumbers(1234567890));
Sumith Harshan
fuente
0

Supongo que estás haciendo algún tipo de localización, así que echa un vistazo a este script .

Deniz Dogan
fuente
0

Usando toLocaleString ref en https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

function formatComma(value, sep = 0) {
      return Number(value).toLocaleString("ja-JP", { style: "currency", currency: "JPY", minimumFractionDigits: sep });
    }
console.log(formatComma(123456789, 2)); // ¥123,456,789.00
console.log(formatComma(123456789, 0)); // ¥123,456,789
console.log(formatComma(1234, 0)); // ¥1,234

Tính Ngô Quang
fuente
-1

otro enfoque:

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;
}
var a  = addCommas(10000.00);
alert(a);

Otro complemento sorprendente: http://www.teamdf.com/web/jquery-number-format/178/

abhiklpm
fuente
-1

Otra forma de hacerlo:

function addCommas(n){
  var s = "",
      r;

  while (n) {
    r = n % 1000;
    s = r + s;
    n = (n - r)/1000;
    s = (n ? "," : "") + s;
  }

  return s;
}

alert(addCommas(12345678));
Jorge
fuente
-1

Aquí está mi versión coffeescript del violín de @ baacke proporcionada en un comentario a @Timothy Perez

class Helpers
    @intComma: (number) ->
        # remove any existing commas
        comma = /,/g
        val = number.toString().replace comma, ''

        # separate the decimals
        valSplit = val.split '.'

        integer = valSplit[0].toString()
        expression = /(\d+)(\d{3})/
        while expression.test(integer)
            withComma = "$1,$2"
            integer = integer.toString().replace expression, withComma

        # recombine with decimals if any
        val = integer
        if valSplit.length == 2
            val = "#{val}.#{valSplit[1]}"

        return val
Pymarco
fuente