Validador Regex de Números en JavaScript

¿Qué es el Regex de Números?

En JavaScript, el regex (expresiones regulares) se usa con frecuencia para validar y coincidir con entradas numéricas como números enteros, decimales y valores formateados como moneda. Esto es especialmente útil en formularios, cálculos financieros y validación de entradas donde importa la estructura de los datos numéricos.

El regex de JavaScript proporciona patrones concisos para distinguir números válidos y rechazar cualquier elemento inesperado, como letras o puntuación mal formada.

Patrones Regex para Validación de Números

1. Validación de Enteros

   Valida números enteros sin símbolos ni puntos decimales.

   const regex = /^\d+$/;

   Coincide con: "123", "2024"

   No coincide con: "12.3", "-100"

2. Validación de Números Decimales

   Valida números con decimales opcionales.

   const regex = /^\d+\.\d+$/;

   Coincide con: "3.14", "99.999"

   No coincide con: "100", "abc"

3. Validación de Números con Signo

   Permite signo negativo o positivo opcional.

   const regex = /^[+-]?\d+(\.\d+)?$/;

   Coincide con: "-45", "+99.99", "0"

   No coincide con: "--12", "100+"

4. Números Formateados con Comas

   Coincide con números como 1,000 o 12,345,678.

   const regex = /^\d{1,3}(,\d{3})*$/;

   Coincide con: "1,000", "100,000"

   No coincide con: "1000", "1,,000"

Cómo Validar Números en JavaScript

Use la clase RegExp integrada o literales regex con métodos como .test() o .match():

const number = "12345";
const pattern = /^\d+$/;
console.log(pattern.test(number)); // true

El método test() ejecuta una búsqueda de coincidencia entre su expresión regular y una cadena especificada. Devuelve true si el patrón coincide con la cadena; de lo contrario, devuelve false. Esto lo convierte en una forma eficiente de verificar rápidamente si la entrada del usuario cumple con un formato específico, como una validación de solo dígitos.

El método devuelve un valor booleano:

• true si el patrón coincide con la cadena

• false si no coincide

Esto difiere del método search(), que en cambio devuelve el índice de la coincidencia (o -1 si no se encuentra).

En resumen:

• Use test() para simplemente verificar si existe una coincidencia y obtener un resultado true o false.

• Si necesita saber dónde en la cadena ocurre la coincidencia, use search().

Esto hace que test() sea especialmente útil para verificaciones de validación rápidas, como confirmar si una cadena contiene solo dígitos.

Consejo:
Sea explícito sobre el valor que está probando. La cadena que pasa es la que se compara con el regex. Si la omite o pasa accidentalmente undefined, JavaScript lo convertirá a la cadena "undefined", lo que casi nunca produce el resultado esperado.

Puede probar su regex personalizado con nuestro Probador Regex de JavaScript interactivo.

¿Cómo se Comporta test() con Regex Global y Diferentes Cadenas?

Cuando usa el método test() con un regex que tiene el indicador global (g), hay un detalle importante: el regex mantiene una propiedad lastIndex entre pruebas repetidas. Esto significa que si llama a test() varias veces, incluso en cadenas diferentes, la búsqueda continúa desde donde terminó la última vez.

• Si test() encuentra una coincidencia, lastIndex avanza a la posición justo después de la coincidencia.

• Mientras siga obteniendo true, el regex no se restablece para nuevas cadenas. El índice continúa aumentando, lo que puede generar coincidencias perdidas si prueba valores diferentes en sucesión.

• Pero tan pronto como test() falla (devuelve false), lastIndex se restablece a 0.

¿Por qué importa esto?

Si está validando varios números o campos en un formulario usando el mismo objeto regex global, y no restablece lastIndex manualmente, pueden aparecer falsos negativos inesperados. Esto suele sorprender a los desarrolladores, especialmente al probar múltiples cadenas.

Escenario de Ejemplo

const regex = /\d+/g;
regex.test("123");    // true (lastIndex now at 3)
regex.test("456");    // true (lastIndex now at 3)
regex.test("789");    // true (lastIndex now at 3)
regex.test("abc");    // false (lastIndex resets to 0)

Observe que después de cualquier false, el índice se restablece, pero antes de eso, si prueba nuevas cadenas, el regex puede comenzar desde una posición más allá del inicio y posiblemente perder una coincidencia al principio.

Mejor Práctica:
Si está usando el mismo regex global para diferentes cadenas, llame a regex.lastIndex = 0 antes de cada nueva prueba, o simplemente evite el indicador global a menos que realmente lo necesite para coincidencias iterativas dentro de una sola cadena (por ejemplo, con exec() en un bucle).

Este pequeño detalle le ayudará a evitar momentos confusos mientras gestiona sus validaciones numéricas.

Cuándo Usar test(), exec() o match()

Cuando valide entradas numéricas o detecte si una cadena coincide con un patrón dado, use test() en su regex. Este método es perfecto para verificaciones rápidas de sí o no, ya que simplemente le indica si su patrón está presente (true o false). Por ejemplo, úselo para verificar si la entrada de un usuario es un número válido antes de continuar con el envío del formulario.

const regex = /^\d+$/;
console.log(regex.test("12345")); // true

Si necesita más detalles, como extraer porciones coincidentes de la cadena o recopilar grupos de captura, use exec(). Este método devuelve un array de resultados (o null si no hay coincidencia), y es especialmente útil cuando su expresión regular contiene grupos o desea todas las coincidencias en una cadena.

Asimismo, el método de cadena match() funciona de forma similar a exec(), pero se llama directamente sobre la cadena. Es ideal cuando desea extraer resultados coincidentes para procesamiento adicional.

En resumen:

• Use test() para validación simple de sí o no.

• Use exec() o match() cuando necesite detalles de la coincidencia o valores extraídos.

De esta manera, siempre elegirá el enfoque correcto para sus necesidades de validación numérica.

Metacaracteres Utilizados

• ^: Inicio de la cadena

• $: Fin de la cadena

• \d: Cualquier dígito [0-9]

• +: Uno o más del anterior

• *: Cero o más del anterior

• ?: Opcional (cero o uno)

• .: Punto escapado para coincidir con el decimal

• [,]: Literal de coma

• (): Agrupación

• []: Clase de caracteres

Ejemplos

Ejemplo 1: Validar un Entero

const input = "250";
const pattern = /^\d+$/;
console.log(pattern.test(input)); // true

Pruebe sus propios patrones con el Probador Regex de JavaScript.

Ejemplo 2: Validar un Número Decimal

const input = "3.1415";
const pattern = /^\d+.\d+$/;
console.log(pattern.test(input)); // true

También puede combinar esto con el Generador de token para generar automáticamente números seguros.

Ejemplo 3: Detectar Números con y sin Signo

const input = "-0.99";
const pattern = /^[+-]?\d+(.\d+)?$/;
console.log(pattern.test(input)); // true

Úselo junto con el Probador Regex de JavaScript para una depuración rápida.

Casos de Uso

• Validación de Formularios: Use regex para garantizar que los usuarios ingresen números válidos en campos como edad, cantidad y presupuesto.

• Aplicaciones Financieras: Valide la precisión decimal en transacciones y precios.

• Limpieza de Datos: Filtre entradas incorrectas antes de importarlas en herramientas de análisis.

• Sistemas de Autenticación: Use regex para procesar OTPs numéricas y tokens de inicio de sesión generados con el Generador de token.

Combínelo con Estas Herramientas

• Probador Regex de JavaScript: Valide patrones de números en JavaScript al instante.

• Generador de token: Útil para generar cadenas numéricas seguras u OTPs.

• Decodificador base64: Decodifique datos numéricos antes de aplicar el regex.

• Validador Regex de Email en JavaScript: Valide datos numéricos junto con entradas de correo electrónico.
• Validador Regex de Direcciones IP en JavaScript: Útil si también se están validando valores IP numéricos.