Publicado en Javascript

Javascript: Como formatear un numero con separador de miles

formateo-de-miles

Este es un buen ejemplo de uso de expresiones regulares para formatear un numero con Javascript.

La idea es escribir en una caja de texto, por ejemplo:

123456789

y que automaticamente, aparezcan los separadores de miles quedando un resultado como el sgte:

123.456.789

A continuacion el codigo completo de la pagina y la funcion javascript:

La funcion JS es la sgte:

function format(input)
{
var num = input.value.replace(/\./g,'');
if(!isNaN(num)){
num = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
num = num.split('').reverse().join('').replace(/^[\.]/,'');
input.value = num;
}

else{ alert('Solo se permiten numeros');
input.value = input.value.replace(/[^\d\.]*/g,'');
}
}

Y ponemos una caja de texto en un formulario con el sgte. codigo:

<form>
<input type="text" onkeyup="format(this)" onchange="format(this)">
</form>

La funcion que formatea, se llamara por cada caracter numerico que se escriba y asi facilitar la entrada de datos.

Finalmente, el codigo completo de la pagina:

<html>
<title>Formatear Numero</title>
<head>
function format(input)
{
var num = input.value.replace(/\./g,'');
if(!isNaN(num)){
num = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
num = num.split('').reverse().join('').replace(/^[\.]/,'');
input.value = num;
}
 
else{ alert('Solo se permiten numeros');
input.value = input.value.replace(/[^\d\.]*/g,'');
}
}
</head>

<body>

<form>
<input type="text" onkeyup="format(this)" onchange="format(this)">
</form>

</body>
</html>

ACTUALIZACION 25-04-2014: se modifico el post y se uso el sourcecode para deplegar mejor el codigo. Ahora solo tienen que copiar y pegar y olvidarse del problema de las cremillas.

TYDW.-

51 comentarios sobre “Javascript: Como formatear un numero con separador de miles

    1. Mira la verdad funciona bien lo que pasa es que fato parte del código… aquí se los dejo.

      //Código para colocar
      //los indicadores de miles mientras se escribe
      //script por tunait!
      function format(input)
      {
      var num = input.value.replace(/\./g,”);
      if(!isNaN(num)){
      num = num.toString().split(”).reverse().join(”).replace(/(?=\d*\.?)(\d{3})/g,’$1.’);
      num = num.split(”).reverse().join(”).replace(/^[\.]/,”);
      input.value = num;
      }

      else{ alert(‘Solo se permiten numeros’);
      input.value = input.value.replace(/[^\d\.]*/g,”);
      }
      }

      eso es todo…

  1. Hola!!! mil gracias por los datos y el código, funcia muy bien 😉

    Alfredo, lo que hay que cambiar en el codigo son los caracteres que se ven como acentos, hay que sustituirlos por comillas dobles (“”) saludos!!!

  2. Hola, el codigo no me funciona, podrías ser mas especifíca Belem en donde cambiar las comillas dobles.
    Porque cuando cambio las comillas en:

    var num = input.value.replace(/\./g,”);

    Se me desactiva el if que sigue y no funciona, si cambio todas las comillas no funciona, si cambio las comillas dobles y solas, no funciona.
    Y si no cambio nada, no funciona.

  3. Amigo este post m salvo, llevaba horas buscano algo asi y es refacisl

    hice el cambio y no hubo problemas

    aca el codigo correjido

    function Moneda(input){
    var num = input.value.replace(/\./g,””);
    if(!isNaN(num)){
    num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
    num = num.split(“”).reverse().join(“”).replace(/^[\.]/,””);
    input.value = num;
    }else{
    input.value = input.value.replace(/[^\d\.]*/g,””);
    }
    }

    y asi lo llaman

    1. Esta excelente el script, sobre todo porque no tengo ni idea de JS :), sabran de alguno que separe miles con comas y decimales con puntos?

      Saludos y muchas gracias!

  4. por si a alguien le quedasen dudas sobre las comillas:

    para todo lo que esta dentro del script los reemplazos son con COMILLA SIMPLE, lo que aparenta ser doble comilla en realidad son dos comillas simples seguidas.

    los únicos reemplazos con doble comilla son la declaración inicial del script (“text/javascript”) y todo lo que sigue debajo del script (las propiedades de la caja de texto).

    muy enredado???

    1. si tienes problemas con el script (al copiarlo y pegarlo en tu pagina), cambia las comillas que te aparecen en el codigo por cremillas simples ( ‘ ) y asi se soluciona el problema.

    2. Mira copia este que si funciona

      function format(input)
      {
      var num = input.value.replace(/\./g,’ ‘);
      if(!isNaN(num)){
      num = num.toString().split(‘ ‘).reverse().join(‘ ‘).replace(/(?=\d*\.?)(\d{3})/g,’$1.’);
      num = num.split(‘ ‘).reverse().join(‘ ‘).replace(/^[\.]/,’ ‘);
      input.value = num;
      }
      else{ alert(‘Solo se permiten numeros’);
      input.value = input.value.replace(/[^\d\.]*/g,’ ‘);
      }
      }

  5. Independizando la funcion… seria asi

    function f_js_puntos_de_mil(param_valor)
    {
    var num = param_valor.replace(/\./g,””);
    if(!isNaN(num))
    {
    num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
    num = num.split(“”).reverse().join(“”).replace(/^[\.]/,””);
    }
    else
    {
    num = param_valor.replace(/[^\d\.]*/g,””);
    }
    return num ;
    }

  6. Hola,
    he probado el scritp y va vastante bien solo encuentro un fallo que no consigo corregir.

    Si introduzco un uno segido de varios ceros, no me ha ce bien la separación de miles. Os pongo varios ejemplos:
    Si introduzco 10000 me pone 1.0000
    Si introduzco 100000 me pone 10.0000
    Si introduzco 1000000 me pone 100.0000
    Si introduzco 10000000 me pone 1.000.0000

    Como vereis el primer separador de miles por la derecha no me lo pone bien y en vez de hacerlo a los 3 ceros me lo hace a los 4 por lo que todo el número está mal separado.

    Esto no me pasa si introduzco otros números que no sean 0. ¿sabeis como arreglarlo? ?os ha pasado lo mismo?

    Gracias y un saludo

    1. correciones JavaScrips

      Formato Numerico al escribir
      esta funcion genera el formato numerico al escribir
      primero

      1.-Texbox onkeyup=”Miles(this)”
      2.- Texbox onchange=”Miles(this)”
      3.- onkeypress=”return Numeros(e)”

      nota:en el codebegin LOAD agregar la siguente linea

      Texbox .Attributes.Add(“onkeypress”, “javascript:return Numeros(event);”)
      4.- que este referenciado el javaScrips a la pagina asp

      5.- recordar hacer ToString.replace (“.”,””) si su campo es string
      usen un doble o decimales

      */

      function Miles(input){
      var num = input.value.replace(/\./g,””);
      if(!isNaN(num)){
      num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g,”$1.”);
      num = num.split(“”).reverse().join(“”).replace(/^[\.]/,””);
      input.value = num;
      }else{
      input.value = input.value.replace(/[^\d\.]*/g,””);
      }
      }

      function Numeros(e) {
      var k;
      document.all ? k = e.keyCode : k = e.which;
      return ((k > 47 && k < 58) || k == 46 || k == 9 || k == 8 || k == 13);
      }

  7. funciona de maravilla! y para no tener problemas cuando se envian los datos por post le adicionE esta funciOn en el onblur.. similar al format.
    Entonces solo se ve la separacion de miles mientras este presente en el campo, luego las quita…

    function unFormat(input)
    {
    /*uso en form: “onblur” => “unFormat(this)”*/
    var num = input.value.replace(/\./g,”);
    input.value = num;
    }

    1. Funciona de maravilla, sin poner tu código, al hacer los cálculos no me reconocía dicha expresión, y gracias al agregar tu código, se solucionó el problema. Un saludo.

  8. “Error en tiempo de ejecución de Microsoft JScript: Se esperaba un objeto”
    Siempre que ingreso este codigo y otros similares con la misma funcion me sale este error y la verdad casi nunca he usado Js y no se como solucionar me pueden colaborar Gracias de antemano

  9. el problema que tengo que al grabarlo en una bd mysql no registra el valor completo. por ejemplo 15.000 solo graba 15.

    He buscado corregir el codigo pero el problema persiste. alguna idea???

    1. Hola.
      Cuando envies el monto a la base MySQL, antes de agregarlo a tu consulta SQL, haz un str_replace() donde reemplazas el punto por un valor vacio.

      atte.

  10. Formato Numerico al escribir (Miles)
    esta funcion genera el formato numerico al escribir
    primero
    1.-Texbox onkeyup=”Moneda(this)”
    2.- Texbox onchange=”Moneda(this)”
    3.- que este referenciado el javaScrips a la pagina asp
    */

    function Moneda(input) {
    var num = input.value.replace(/\./g, “”);
    if (!isNaN(num)) {
    num = num.toString().split(“”).reverse().join(“”).replace(/(?=\d*\.?)(\d{3})/g, “$1.”);
    num = num.split(“”).reverse().join(“”).replace(/^[\.]/, “”);
    input.value = num;
    } else {
    input.value = input.value.replace(/[^\d\.]*/g, “”);
    }
    }

  11. Para responderle a los que desean que agrege los decimales:

    La logica seria validar de que si por ejemplo queremos 3 decimales pues si hay 3 numeros escritos o menos se ejecute un if que añada un cero y una coma a la izquierda y no ejecute este script para formatear con el separador de miles, asi mismo en caso de que escriba mas de 3 caracteres borre el cero a la izquierda y vaya corriendo los numeros a la izquierda, porsupuesto que entraria en ejecucion este script para agregar el separador de miles cuando hayan al menos 8 caracteres en la caja de texto ya que seria un numero como este 1.000,000 ¿Se entiende la idea?

  12. Disculpen se deberia ejecutar este script cuando hayan 9 caracteres para la division con 3 decimales segun la logica que explique anteriormente, si me da un chance voy a programarlo y subo las lineas para que vean.

    Por cierto el script que recomiendan aca de Tunait da error con 3 y 2 decimales y es lo que estoy necesitando casualmente.

  13. Hola, Disculpen tengo una duda, y para poder validar el input a tipo de dato float, como le puedo hacer, lo que pasa me marca error por las comas, no las toma como cantidad si no como texto??

    Por favor, muchísimas gracias!!

  14. function format(input)
    {
    var num = input.value.replace(/\./g,”);
    if(!isNaN(num)){
    num = num.toString().split(”).reverse().join(”).replace(/(?=\d*\.?)(\d{3})/g,’$1.’);
    num = num.split(”).reverse().join(”).replace(/^[\.]/,”);
    input.value = num;
    }

    else{ alert(‘Solo se permiten numeros’);
    input.value = input.value.replace(/[^\d\.]*/g,”);
    }
    }

    podrían por favor modificarlo que en lugar que ponga puntos (.) que coloque comas (,)
    porque honestamente ya hice de todo pero no me sale. se les agradecería un montón

  15. hola funciona super bien el script, mi duda es como hacer para sumar desde dos campos que llamen a la funcion de dar formato de numeros? por ejemplo en el primer campo introdusco 1000 y el script formatea como 1.000, en el segundo campo introdusco nuevamente 1000 y el script cambia por 1.000 en un tercer campo mediante otra funcion realiso la suma del primer y el segundo campo y el resultado me da 2 en vez de 2.000 o 2000 que es lo que necesito

    1. Hola, eso sucede porque el “punto” lo considera un simbolo para la parte de decimales. Es parte de la configuracion regional. Para operar aritmeticamente estos valores formateados con y/o enviarlos a la BD debes quitar los “puntos”. Con un REPLACE antes de hacer operaciones aritmeticas te puedes apoyar.

      Saludos.

  16. muy complicado, utilicen esta función

    la funcion isPositiveInteger valida que sea numerico y que no afecten las comas o puntos
    por medio de onblur se envian los datos como el campo especifico y valor a convertir utilizando formularios de HTML
    y la funcion getElementById(Campo) devuelve el dato requerido al campo convertido.
    el flag pueden quitarlo y cambiar la logica de del IF

    En el codigo

    function isPositiveInteger(theDatum)
    {
    aString = “” + theDatum
    for (var i = 0; i < aString.length; i++)
    {
    if (aString.charAt(i) “9”)
    {
    if(aString.charAt(i)==”.”)
    {
    return true
    }
    else
    {
    return false
    }

    }
    else
    {
    return true
    }
    }

    }

    function currency(unDato,Campo)
    {
    var n, s;
    var flag=””;

    if(unDato.search(“,”)!=-1||unDato==””)
    {
    flag=”1″;
    }
    else
    {

    if(isPositiveInteger(unDato)==false)
    {
    alert(“El campo debe ser numerico”)
    document.getElementById(Campo).value=””;
    }

    if(isPositiveInteger(unDato)==true)
    {

    n = new Number(unDato);
    s = n.toLocaleString();
    document.getElementById(Campo).value=s;
    }

    }

    }

    en HTML

    espero les funcione

  17. Magnifico, pero al operar me lo considera como decimales, por ejemplo 1.000.000 solo me reconoce el 1, y los cálculos me los hace sobre el 1.

  18. Buenas Tardes
    Estoy tratando de realizar este cambio en mi programa pero no me resulta, me podrian ayudar con el tema.
    Gracias

  19. Muchas gracias, lo modifique para usar de separador la ‘,’

    function format(input)
    {
    var num = input.value.replace(/\,/g,”);
    if(!isNaN(num)){
    num = num.toString().split(”).reverse().join(”).replace(/(?=\d*\.?)(\d{3})/g,’$1,’);
    num = num.split(”).reverse().join(”).replace(/^[\,]/,”);
    input.value = num;
    }

    else{ alert(‘Solo se permiten numeros’);
    input.value = input.value.replace(/[^\d\.]*/g, ”);
    }
    }

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s