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)">