1. Sin regex
Se puede utilizar el método Number.toLocaleString().
El método toLocaleString() retorna una cadena que contiene una representación del número acorde al idioma.
var numero = 123456.95432,
comas, puntos, local;
const noTruncarDecimales = {maximumFractionDigits: 20};
// Convertimos al número en 3 formatos diferentes
comas = numero.toLocaleString('en-US', noTruncarDecimales);
puntos= numero.toLocaleString('es', noTruncarDecimales);
local = numero.toLocaleString( undefined, noTruncarDecimales);
//Mostrar el resultado
document.getElementById('resultado').innerText =
" Separador de miles con comas: " + comas
+ "\nSeparador de miles con puntos: " + puntos
+ "\n Config local del usuario: " + local;
<pre id="resultado"></pre>
2. Con regex
El problema con la expresión regular que estás usando es que verifica que no haya un límite de palabra completa (con \B
) antes del número, y esto es verdadero entre dos dígitos cualesquiera. Por lo tanto, toma la parte decimal como que fuera otro número.
En otros lenguajes, sería mucho más sencillo de corregir, pero JavaScript no soporta \G
ni lookbehinds. Lo que podemos hacer para solucionarlo fácilmente, es hacer que también coincida con un punto seguido de uno o más dígitos, con \.\d+
. Y si coincide, reemplazarlo con esos mismos caracteres (o sea, no reemplazar).
Patrón:
/(\.\d+)|\B(?=(\d{3})+(?!\d))/g
(\.\d+)
- Grupo 1 (captura el texto): Coincide con un punto literal seguido de uno o más digitos. Entonces, si encuentra la parte decimal de un número, lo reemplazaremos por su mismo valor.
|
- O (alternancia: coincide con todo lo de arriba o con todo lo de abajo).
\B(?=(\d{3})+(?!\d))
- El regex de la pregunta.
\B
- Coincide en una posición que no es un límite de palabra.
(?=(\d{3})+(?!\d))
- Aserción positiva. Intenta que el patrón coincida sin consumir caracteres.
(\d{3})+
- Seguido de dígitos cuya cantidad es un múltiplo de 3.
(?!\d)
- que luego no están seguidos por otro dígito.
Esta estrategia tiene el beneficio de poder usarse tanto en un número como en un texto completo (formateará todos los números), al igual que la intención de la función original.
Reemplazo:
Al reemplazar, en vez de usar un valor fijo, usaremos una función, para ver si se capturó el primer grupo (la parte decimal).
function(m,g1){ // Si coincidió `(\.\d+)`, g1 tendrá el texto.
return g1 || "," // Sino, reemplazamos con coma (como en el regex original)
}
Código:
function milesNumeros(numero) {
return numero.toString().replace(/(\.\d+)|\B(?=(\d{3})+(?!\d))/g, function(m,g1){
return g1 || ","
});
};
// ----------- Pruebas -----------
var formateado = milesNumeros("Texto con números 36598365.36 y más números 3.659836536");
console.log(formateado);
formateado = milesNumeros(12345.6789012);
console.log(formateado);
3. Otra opción, con ECMAScript6 (no muy compatible)
Nota: Esto no está estandarizado en todos los navegadores (ver Sticky flag ("y")
).
Usando el modificador /y
, se puede anclar la coincidencia al final del último reemplazo. Entonces, podemos diferenciar si estamos en una posición donde recién reemplazamos por coma.
/((?!^)|(?:^|.*?[^\d.])\d{1,3})(\d{3})(?=(?:\d{3})*(?!\d))/gy
((?!^)|(?:^|.*?[^\d.])\d{1,3})
- Grupo 1: Coincide y captura el texto previo a una posición de una coma. Opciones:
(?!^)
- No está al inicio del texto, entonces sólo puede ser que recién se haya reemplazado por coma en esta posición.
(?:^|.*?[^\d.])\d{1,3})
- 2.a Al inicio del texto (^
), o 2.b venimos de reemplazar la última coma (como en (1)) pero no quedan más comas por insertar, por lo que se debe consumir caracteres para buscar si hay otro número en el texto .*?[^\d.]
... Y luego de esto (de 2.a o 2.b) entre 1 y 3 dígitos \d{1,3}
.
(\d{3})
- Grupo 2: Coincide y captura los 3 dígitos que van después de la coma.
(?=(?:\d{3})*(?!\d))
- Aserción positiva que verifica que haya una cantidad de dígitos que sea múltiplo de 3, y que luego no esté seguido de un dígito (pero no consume caracteres).
Opciones: /gy
- g (global) reemplazar todas las coincidencias, no sólo la primera; e y (sticky) anclar la expresión regular al inicio del texto o al final de la última coincidencia.
function milesNumeros(numero) {
return numero.toString()
.replace(/((?!^)|(?:^|.*?[^\d.,])\d{1,3})(\d{3})(?=(?:\d{3})*(?!\d))/gy, "$1,$2");
};
// ----------- Pruebas -----------
var formateado = milesNumeros("Texto con números 36598365.36 y más números 3.659836536");
console.log(formateado);
formateado = milesNumeros(12345.6789012);
console.log(formateado);