lunes, 26 de septiembre de 2011

Separar valores con comas cada tres dígitos (miles) usando Javascript y JQuery

Aqui les dejo una función en Javascript para separar con comas cada tres dígitos (representación de miles) los valores en un campo de texto aunque también podría aplcarse para los labels y otros elementos.


function conComas(valor) {
    var nums = new Array();
    var simb = ","; //Éste es el separador
    valor = valor.toString();
    valor = valor.replace(/\D/g, "");   //Ésta expresión regular solo permitira ingresar números
    nums = valor.split(""); //Se vacia el valor en un arreglo
    var long = nums.length - 1; // Se saca la longitud del arreglo
    var patron = 3; //Indica cada cuanto se ponen las comas
    var prox = 2; // Indica en que lugar se debe insertar la siguiente coma
    var res = "";

    while (long > prox) {
        nums.splice((long - prox),0,simb); //Se agrega la coma
        prox += patron; //Se incrementa la posición próxima para colocar la coma
    }

    for (var i = 0; i <= nums.length-1; i++) {
        res += nums[i]; //Se crea la nueva cadena para devolver el valor formateado
    }

    return res;
}



Para llamar a la función conComas() yo lo hago con JQuery utilizando el evento keyup(), ésto eso, cada ves que se suelte una tecla al escribir en el campo se formateara el valor actual agregando alguna coma si hay más de trés digitos, seis dígitos, etc...


$("#principal input:text").keyup(function () {
        var valActual = $(this).val();
        var nuevoValor = conComas(valActual);
        $(this).val(nuevoValor);
    });

Para aplicar la misma función a todos los campos desde que se carga la página utilizo each() :


$("#principal input:text").each(function () {
        var valActual = $(this).val();
        var nuevoValor = conComas(valActual);
        $(this).val(nuevoValor);
    });

En los dos casos anteriores se aplica a todos los inputs de tipo text que esten dentro del div principal.

Sumar valores con comas

En mi caso tuve que sumar campos y mostrarlos en otro campo que indicara el total. Como ésta función la iba a utilizar varias veces, y en algunas sumas la cantidad de campos a sumar era distinta, lo hice utilizando un array, es decir, la función que a continuación suma los valores recibe como parametro un array:

function sumarConComas(valores) {
    var total = 0;
    var valor;
    var cont = 0;

    for (cont in valores) {
        valor = valores[cont];
        valor = valor.replace(/\D/g, "");
        total += parseInt(valor);
    }

    return conComas(total);

}

Lo única que hace la función anterior es recibir los valores de un arreglo y sumarlos, primero les quita la coma y al final lo vuelve a formatear utilizando la función conComas(). A continuación se muestra como se mandan los valores:

    $("#campo1,#campo2").keyup(function () {

        var valores = new Array($("#campo1").val(), $("#campo2").val());
        var valor2 = sumarConComas(valores);
        $("#campoTotal").val(valor2);

    });

11 comentarios:

  1. Donde dejas los decimales, el script se distorciana al usar un deciamal por ejemplo 123.45

    ResponderEliminar
  2. Jjajajaja Si, por lo menos a mi no me sirve así :D, peor gracias de todas maneras.

    ResponderEliminar
  3. no recomiendo el script, mucha cosa y poco resultado

    ResponderEliminar
  4. Yo solo lo necesitaba para poner el separador de miles '.' y me ha venido perfecto.

    ResponderEliminar
  5. porque en una cifra de 7 0 mas digitos el valor se torna cero (0).. solo me funciona bien hasta 6 digitos

    ResponderEliminar
  6. Les dejo un script que hice que soluciona lo de los decimales. Saludos!


    function formato_comas(datos) {
    var cadena = datos.toString();
    var dec = cadena.split(".");
    var cantidad = dec[0];
    var decimales = dec[1];
    var tokens = cantidad.split("");
    var tam = tokens.length;
    var resultado="";
    var c1 = tam - 1;
    var c2 = 0;
    while (c1 > -1) {
    if (c2 > 2) {
    resultado = "," + resultado;
    c2 = 0;
    }
    alert(resultado);
    resultado = tokens[c1] + resultado;
    c1 = c1 - 1;
    c2 = c2 + 1;
    }
    if (dec.length > 1) {
    resultado = resultado + "." + decimales;
    }
    return resultado;
    }

    ResponderEliminar
  7. esta porqueria no sirve ,le deverian de cortar elpene al autor para que se le quite lo cerdo

    ResponderEliminar
    Respuestas
    1. TE PASAS DE VERDURA, SI FUNCIONA Y BIEN CHIDO, TE FALTA PENSARLE UN POQUITO, NO TE PUEDES LLAMAR PROGRAMADOR!!!
      CHECA EL CÓDIGO DE ABAJO, ESTÁ MODIFICADO PARA LOS DECIMALES, Y HASTA SIGNO DE PRECIO TIENE. Y SI NO LO NECESITAS ECHALE COCO PARA QUE SE LO QUITES

      Eliminar
  8. SOLO MODIFIQUÉ ALGUNAS COSAS MUY SENCILLAS, ES COSA DE ECHARLE COCO MUCHACHOS, NO TODO TIENE QUE VENIR PELADITO Y EN LA BOCA ;)

    var nums = new Array();
    var simb = ","; //Éste es el separador
    var signo = "$"; //Éste es el signo de precio
    valor = valor.toString();
    //valor = valor.replace(/\D/g, ""); //Ésta expresión regular solo permitira ingresar números
    nums = valor.split(""); //Se vacia el valor en un arreglo
    var long = nums.length - 1; // Se saca la longitud del arreglo
    var patron = 3; //Indica cada cuanto se ponen las comas
    var prox = 2; // Indica en que lugar se debe insertar la siguiente coma
    var res = "";

    while (long > prox) {
    //var punto = nums[prox+1];
    if (prox == 2) {

    } else {
    nums.splice((long - prox), 0, simb); //Se agrega la coma
    }
    prox += patron; //Se incrementa la posición próxima para colocar la coma

    }
    nums.splice(0, 0, signo); //Se agrega la coma


    for (var i = 0; i <= nums.length - 1; i++) {

    res += nums[i]; //Se crea la nueva cadena para devolver el valor formateado
    }

    return res;
    }

    ResponderEliminar
  9. function conComas(valor) {
    var nums = new Array();
    var simb = ","; //Éste es el separador
    var simbp= ".";
    valor = valor.toString();
    valor = valor.replace(/\D/g, ""); //Ésta expresión regular solo permitira ingresar números
    nums = valor.split(""); //Se vacia el valor en un arreglo
    var long = nums.length - 1; // Se saca la longitud del arreglo
    var patron = 3; //Indica cada cuanto se ponen las comas
    var prox = 1; // Indica en que lugar se debe insertar la siguiente coma
    var res = "";

    while (long > prox) {
    if (prox == 1)
    nums.splice((long - prox),0,simbp);
    else
    nums.splice((long - prox),0,simb); //Se agrega la coma
    prox += patron; //Se incrementa la posición próxima para colocar la coma
    }

    for (var i = 0; i <= nums.length-1; i++) {
    res += nums[i]; //Se crea la nueva cadena para devolver el valor formateado
    }

    return res;
    }

    ResponderEliminar