Analizar una URL _

Cómo funciona el análisis de URL

El analizador se basa en el estándar WHATWG URL, el mismo algoritmo que usa el navegador para cualquier href. Pasamos la cadena al constructor URL nativo y leemos cada componente como una propiedad.

1. Validar la entrada. Una cadena vacía muestra un aviso de entrada vacía. En caso contrario, pasamos el texto a new URL(text); un TypeError indica que la cadena no es una URL absoluta válida.
2. Leer los componentes estructurales. Leemos protocol, username, password, host, hostname, port, pathname, search, hash y origin del objeto URL. Cada uno aparece en su propia fila para que puedas copiarlo de forma independiente.
3. Recorrer la cadena de consulta. Iteramos url.searchParams.entries() y mostramos una fila de tabla por clave. El valor sin procesar aparece junto a decodeURIComponent(value) para que los payloads codificados en porcentaje (espacios, signos más, Unicode) sean legibles en texto plano.
4. Reconstruir a demanda. Edita cualquier celda, elimina una fila o añade un nuevo parámetro y luego haz clic en Reconstruir URL. La herramienta construye un nuevo objeto URL a partir de tus ediciones y escribe el resultado de vuelta en el campo de entrada.
5. Modo en vivo. Activa el modo en vivo y cada pulsación de tecla vuelve a analizar la URL con un antirrebote de 150 ms. Útil cuando pegas fragmentos de un registro y quieres respuesta inmediata.

Por qué analizar una URL en el navegador

• Nada sale de la pestaña. Las URLs contienen tokens, IDs de sesión, estado OAuth y parámetros de consulta firmados que no conviene que retenga un servicio externo. Este analizador usa el mismo algoritmo URL que tu navegador ya ejecuta localmente — sin subida, sin llamada de red.
• Coincide con lo que ve tu código. Node.js, Deno, los navegadores modernos y Cloudflare Workers usan la implementación WHATWG URL. Inspeccionar una URL aquí da el mismo desglose de componentes que una llamada a new URL(input) en producción.
• Lee las cadenas de consulta como los humanos. Los valores sin procesar y decodificados aparecen uno junto al otro, de modo que un par q=hello%20world muestra tanto los bytes en el cable como el hello world legible de un vistazo. No es necesaria ninguna decodificación mental.
• Edición de ida y vuelta. Elimina un parámetro de seguimiento, corrige un error tipográfico en la ruta, cambia un puerto — y reconstruye la URL. La salida pasa de nuevo por el constructor URL, por lo que cualquier valor no válido se detecta antes de copiarlo.

Aplicaciones habituales

El análisis de URL aparece en el trabajo diario de desarrollo, seguridad y analítica siempre que una URL es algo más que un simple enlace.

• Depuración de endpoints de API: confirma la URL base, la ruta y los parámetros de consulta antes de enviar una petición con curl o Postman.
• Auditorías de parámetros de seguimiento: lista cada UTM, gclid, fbclid o clave de campaña en la URL de una página de destino y decide cuáles conservar.
• Validación de enlaces de afiliados y socios: pega un deeplink, confirma el host de destino y el redirect embebido antes de publicarlo.

Un ejemplo paso a paso

Pega https://example.com/search?q=hello%20world&lang=en en el campo de entrada. El protocolo muestra https:, el nombre de host muestra example.com, la ruta muestra /search y la búsqueda muestra ?q=hello%20world&lang=en. La tabla de consulta muestra dos filas: q con valor sin procesar hello%20world y valor decodificado hello world, y luego lang con ambos valores igual a en. Haz clic en Eliminar en la fila lang y luego en Reconstruir URL — la entrada se actualiza a https://example.com/search?q=hello%20world.

FAQ

¿Qué es un analizador de URL?

Un analizador de URL toma una cadena de URL y la descompone en componentes con nombre: protocolo (https), información de usuario (nombre de usuario, contraseña), host (nombre de host más puerto opcional), ruta, cadena de consulta y fragmento. También decodifica cada parámetro de consulta para que los valores codificados en porcentaje (como %20 para un espacio) sean legibles. El analizador de aquí usa el estándar WHATWG URL, el mismo que usa tu navegador para cargar una página.

¿Cuál es la diferencia entre host y nombre de host?

El nombre de host es simplemente el dominio (o dirección IP) — para example.com:8080 el nombre de host es example.com. El host es el nombre de host más el puerto cuando hay un puerto no predeterminado, por lo que la misma URL tiene un host de example.com:8080. Para URLs en puertos predeterminados (443 para https, 80 para http) el host y el nombre de host son idénticos.

¿Se decodifica automáticamente?

Los componentes estructurales (protocolo, nombre de host, puerto, ruta) se leen directamente del objeto URL sin decodificación adicional — el constructor URL ya los normaliza. Los valores de consulta se muestran dos veces: la cadena codificada en porcentaje sin procesar tal como aparece en search, y el valor decodificado producido por decodeURIComponent. De este modo puedes copiar la forma que espera tu herramienta downstream.

¿Puedo editar y reconstruir la URL?

Sí. Cada celda de partes y cada celda de parámetro de consulta es editable. Añade o elimina filas de consulta con los botones Añadir y Eliminar, luego haz clic en Reconstruir URL desde partes. La herramienta ejecuta tus ediciones de nuevo a través del constructor URL y escribe el resultado en la entrada — si las ediciones producen una URL no válida, recibirás el mismo mensaje de error que obtendrías de new URL() en tu propio código.

El análisis de URL es una de esas pequeñas tareas que todo desarrollador web realiza cada semana. Hacerlo en el navegador, con el mismo algoritmo que usa el código en producción, hace el trabajo rápido y mantiene los datos en tu máquina.