Validador de URL Regex en JavaScript

¿Qué es URL Regex en JavaScript?

En JavaScript, un regex de URL (expresión regular) se usa para verificar si una cadena sigue la estructura de una dirección web válida. Esto puede incluir enlaces HTTP o HTTPS, nombres de dominio y rutas o parámetros de consulta opcionales.

Todas las URLs válidas siguen un patrón particular.

Tienen tres partes principales:

• Protocolo (como http o https)

• Nombre de dominio (o en ocasiones una dirección IP)

• Puerto y ruta (el puerto suele ser opcional, mientras que la ruta especifica la ubicación del recurso)

Un regex bien elaborado garantiza que cada uno de estos componentes esté presente y tenga el formato correcto, lo que lo convierte en una herramienta práctica para validar entradas de usuarios o analizar direcciones web en sus aplicaciones JavaScript. El regex ayuda a los desarrolladores a filtrar enlaces inválidos o malformados en entradas de usuario, APIs y formularios.

Los patrones de URL regex son útiles para:

• Validar enlaces en formularios y entradas de usuarios

• Extraer URLs de texto o registros

• Limpiar y procesar datos en scripts de web scraping o automatización

• Evitar que se envíen enlaces inválidos a los servidores

¿Qué Hace Válida a una URL?

Todas las URLs válidas siguen un patrón particular. Tienen tres partes principales:

• Protocolo: Especifica el método usado para acceder al recurso (por ejemplo, http, https).

• Nombre de dominio (o dirección IP): La dirección única del sitio web o recurso.

• Puerto y ruta (opcional): Detalles adicionales como el número de puerto y la ruta o archivo específico en el servidor.

Patrón Común de URL Regex en JavaScript

Un regex de uso común para validación básica de URLs es:

/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/

Este patrón verifica:

• http o https opcional

• Un nombre de dominio válido

• Una ruta y cadena de consulta opcional

Cómo Validar URLs en JavaScript con Regex

Así puede usar regex para validar una URL en JavaScript:

function isValidURL(url) {
  const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/;
  return urlPattern.test(url);
}
// Test
console.log(isValidURL("https://example.com"));           // true
console.log(isValidURL("http://my.site/path?q=1"));       // true
console.log(isValidURL("invalid-url"));                   // false

Ejemplos de URLs Válidas e Inválidas

Validación de URLs con el Objeto URL de JavaScript

Si desea una solución más robusta e integrada, el objeto URL de JavaScript hace el trabajo pesado y analiza correctamente incluso las URLs más complejas, sin necesidad de preocuparse por casos límite o escribir patrones complejos.

Así funciona: puede crear una función utilitaria que simplemente intenta crear un nuevo objeto URL a partir de la entrada. Si la cadena no es una URL válida, el constructor lanzará un error, que puede usar para detectar entradas inválidas.

Tenga en cuenta: el objeto URL validará la estructura de la URL, pero no filtrará solo http/https a menos que agregue una verificación de protocolo adicional. Esto lo convierte en un validador de propósito general excelente para validación rápida de formularios o verificación de enlaces sobre la marcha.

Comparación de Enfoques para Validar URLs

Aunque el regex es una opción popular para la validación de URLs, JavaScript ofrece distintos enfoques, cada uno con sus ventajas:

1. Usando Expresiones Regulares (Regex)

Los patrones regex se usan ampliamente para verificar rápidamente la estructura de las URLs. El patrón anterior verifica:

• Un protocolo http o https opcional

• Uno o más subdominios y nombres de dominio válidos

• Una extensión de dominio de al menos dos caracteres

• Rutas, parámetros de consulta o fragmentos opcionales

El regex es ideal para validación ligera e integración sencilla en formularios o scripts simples.

2. Usando el Constructor URL

El objeto integrado de JavaScript ofrece una forma robusta de validar y analizar URLs sin escribir patrones personalizados:

function isValidURL(url) {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}

Este método es confiable, maneja casos límite y es recomendable cuando necesita validación integral.

3. Usando Paquetes de Terceros

Para proyectos que requieren validación más avanzada, considere paquetes npm como is-url o is-url-http:

import isUrl from 'is-url';
console.log(isUrl("https://example.com")); // true
console.log(isUrl("invalid-url")); // false

Estas librerías son especialmente útiles para validación del lado del servidor o bases de código más grandes. Use el enfoque que mejor se adapte a su caso de uso: regex para verificaciones rápidas, el objeto URL para confiabilidad, o un paquete de terceros para necesidades avanzadas.

¿Por Qué Usar el Objeto URL para la Validación?

• Precisión: El objeto URL sigue las reglas oficiales de análisis de URL y maneja fácilmente casos límite que el regex suele pasar por alto.

• Legibilidad: El uso del objeto URL hace su código más fácil de entender y mantener.

• Manejo de Errores: Lanza un error claro si la entrada no es una URL válida.

• Flexibilidad: El objeto URL le permite acceder directamente a partes de la URL como hostname, pathname o parámetros de consulta.

Validación de URLs con el Paquete npm is-url-http

Si prefiere algo más sencillo que escribir su propio regex, el paquete npm is-url-http hace la validación muy fácil, especialmente cuando desea aplicar únicamente HTTP y HTTPS.

Cómo Usarlo

1. Instale el paquete:

   npm install is-url-http

2. Importe y use en su JavaScript:

   import isUrlHttp from 'is-url-http';
   // Ejemplos
   isUrlHttp("https://www.example.com"); // returns true
   isUrlHttp("http://example.com");      // returns true
   isUrlHttp("www.example.com");         // returns false
   isUrlHttp("invalid-url");             // returns false

Validación de URLs con el Paquete npm is-url

import isUrl from 'is-url';
console.log(isUrl("https://www.example.com")); // true
console.log(isUrl("http://example.com"));      // true
console.log(isUrl("www.example.com"));         // false
console.log(isUrl("invalid-url"));             // false

Consejos Profesionales para Usar URL Regex en JavaScript

• Use grupos no capturadores cuando no necesite extraer sub-coincidencias. Mejora el rendimiento.

• Combínelo con el Probador de Regex en JavaScript para probar patrones complejos de forma interactiva.

• Evite patrones demasiado estrictos que puedan bloquear URLs válidas sin querer.

• Normalice la entrada antes de validar (por ejemplo, eliminando espacios en blanco).

• Combínelo con herramientas como el Generador de token para validar URLs con tokens de acceso o el Codificador Base64 para componentes de URL seguros.

Metacaracteres de Regex Utilizados

• ^: Ancla la coincidencia al inicio de la cadena

• $: Ancla la coincidencia al final de la cadena

• ?: Marca el token anterior como opcional

• (): Grupo capturador

• (?:): Grupo no capturador

• []: Conjunto de caracteres

• .: Coincide con cualquier carácter excepto nueva línea

• +: Coincide con una o más ocurrencias

• *: Coincide con cero o más ocurrencias

• /: Barra diagonal escapada (para componentes de ruta)

Combínelo con Estas Herramientas

• Probador de Regex en JavaScript: Pruebe cualquier patrón en vivo.

• Generador de token: Valide parámetros de URL con token.

• Codificador Base64: Codifique datos dentro de URLs.

• Validador de UUID Regex en JavaScript: Coincida UUIDs usados en URLs RESTful.

• Validador de Email Regex en JavaScript: Valide direcciones de correo electrónico enlazadas en formularios.

• Validador de Número de Teléfono Regex en JavaScript: Para formularios de contacto que incluyen campos de teléfono y URL.