Skip to main content
1 de 3
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)">

Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31