Skip to main content
se añadieron 256 caracteres en el cuerpo
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');

  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // Aquí buscamos en grupos de tres dígitos que estén seguidos por otroun dígito, y añadimos un punto después del tercerprimer dígito del grupo de 3 encontrado, es decir, si ingreso "12345", capturo 3 digitos luego del primero (que es "234"), y devolvemos ese mismo pero con un punto delante del primer elemento del grupo de 3 (que sería "2.34") y juntándolo sería "12.345".
  // Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4}\d)(?=(\d{3})+(?!\d))/g, '$1.');

  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(?=\d{4}\d)(?=(\d{3})+(?!\d))/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');

  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // Aquí buscamos en grupos de tres dígitos que estén seguidos por otro dígito, y añadimos un punto después del tercer dígito. Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');

  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');

  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // Aquí buscamos en grupos de tres dígitos que estén seguidos por un dígito, y añadimos un punto después del primer dígito del grupo de 3 encontrado, es decir, si ingreso "12345", capturo 3 digitos luego del primero (que es "234"), y devolvemos ese mismo pero con un punto delante del primer elemento del grupo de 3 (que sería "2.34") y juntándolo sería "12.345".
  // Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');

  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
Corrijo el código, ya que antes se podía poner varias comas.
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31
  • Permitimos que solamente se ingrese números, puntos y comas.
  • Dividimos al valor en dos partes (entera y decimal) con split() usando a la , como separador.
  • Validamos que no haya más de dos comas (o sea más de 2 elementos, ya que usamos a la , como separador). Si ocurre, hacemos un pop() al array, eliminando el último elemento.
  • Con una expresión regular, damos formato sólo a la parte entera, que sería el primer elemento del array obtenido con el split().
  • Luego unimos las dos partes (entera y decimal) usando la coma como la unión de ambos elementos.
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');
  
  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(','); 

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // LuegoAquí buscamos en grupos de tres dígitos que estén seguidos por otro dígito, y añadimos un punto después del tercer dígito. Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  
  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
  • Permitimos que solamente se ingrese números, puntos y comas.
  • Dividimos al valor en dos partes (entera y decimal) con split() usando a la , como separador.
  • Con una expresión regular, damos formato sólo a la parte entera, que sería el primer elemento del array obtenido con el split().
  • Luego unimos las dos partes (entera y decimal) usando la coma como la unión de ambos elementos.
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');
  
  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');
  
  // Luego buscamos en grupos de tres dígitos que estén seguidos por otro dígito, y añadimos un punto después del tercer dígito. Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  
  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
  • Permitimos que solamente se ingrese números, puntos y comas.
  • Dividimos al valor en dos partes (entera y decimal) con split() usando a la , como separador.
  • Validamos que no haya más de dos comas (o sea más de 2 elementos, ya que usamos a la , como separador). Si ocurre, hacemos un pop() al array, eliminando el último elemento.
  • Con una expresión regular, damos formato sólo a la parte entera, que sería el primer elemento del array obtenido con el split().
  • Luego unimos las dos partes (entera y decimal) usando la coma como la unión de ambos elementos.
function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');

  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(','); 

  // Cuando coloco la coma, estoy creando un elemento más en el array, entonces si la longitud del array es mayor a 2, eliminamos ese último elemento, teniendo solo 2 elementos siempre (parte entera y parte decimal).
  if (partes.length > 2) partes.pop();

  // Aquí buscamos en grupos de tres dígitos que estén seguidos por otro dígito, y añadimos un punto después del tercer dígito. Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');

  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');

  if (partes.length > 2) partes.pop();

  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

Algo mucho más sencillo y en menos líneas de código, podemos hacerlo de la siguiente forma:

  • Permitimos que solamente se ingrese números, puntos y comas.
  • Dividimos al valor en dos partes (entera y decimal) con split() usando a la , como separador.
  • Con una expresión regular, damos formato sólo a la parte entera, que sería el primer elemento del array obtenido con el split().
  • Luego unimos las dos partes (entera y decimal) usando la coma como la unión de ambos elementos.

Demo:

function format(input) {
  // Primero, vamos a obtener el valor del input para eliminar todos los caracteres que no sean dígitos o comas, es decir, podremos solo ingresar no más que sólo números y comas.
  const numero = input.value.replace(/[^\d,]/g, '');
  
  // Luego, dividimos el valor en dos partes: la parte entera (el número antes de la coma) y la parte decimal (el número después de la coma).
  const partes = numero.split(',');
  
  // Luego buscamos en grupos de tres dígitos que estén seguidos por otro dígito, y añadimos un punto después del tercer dígito. Solo estamos dando formato al primer elemento, que es el número entero (antes de la coma).
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  
  // Finalmente, unimos la parte entera (ya formateada) y la parte decimal, y lo asignamos como valor del input.
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">

function format(input) {
  const numero = input.value.replace(/[^\d,]/g, '');
  const partes = numero.split(',');
  partes[0] = partes[0].replace(/(?=\d{4})(\d{3})/g, '$1.');
  input.value = partes.join(',');
}
<input type="text" oninput="format(this)">