URL Parser & Builder
Understand URL Parser & Builder
Divide una URL en protocolo, host, puerto, ruta, parámetros de consulta y fragmento, y reconstruye una URL válida a partir de esas partes.
How it works
El análisis usa la API URL de WHATWG incorporada en el navegador en lugar de una expresión regular, así que aplica la misma normalización que la barra de direcciones: pasa a minúsculas el esquema y el host, elimina los puertos por defecto (https://example.com:443 pasa a https://example.com), convierte a punycode los dominios internacionalizados y aplica percent-encoding a lo que deba codificarse. Los parámetros de consulta se leen mediante URLSearchParams, que descodifica cada clave y cada valor y trata el "+" de una query string como un espacio. Reconstruir una URL a partir de sus partes vuelve a codificar automáticamente, y esa es la razón para usar esto en lugar de concatenar cadenas.
When to use it
- Desmenuzar un callback de OAuth o una URL de seguimiento larga para ver exactamente qué parámetros hay y en qué se descodifican
- Comprobar si un destino de redirección en el que va a confiar apunta al host que usted cree: el campo que hay que comparar es el nombre de host analizado, no una subcadena de la URL entera
- Ensamblar una URL con valores de consulta proporcionados por el usuario sin codificar a mano ampersands, espacios y barras
- Confirmar que un segmento de ruta con percent-encoding (%2F frente a /) sobrevive tal como espera su router
Watch out for
- Las claves de consulta repetidas se colapsan. `?tag=a&tag=b` es legal y habitual, pero una vista plana de clave/valor conserva solo el último valor: use `searchParams.getAll("tag")` en el código cuando los duplicados importen.
- El fragmento que sigue a `#` nunca se envía al servidor. Existe solo en el navegador, y por eso poner ahí un token lo oculta de los logs del servidor pero no de ningún script de la página.
- Solo se analizan URL absolutas. Una ruta relativa como `/v2/users` no tiene esquema ni host y necesita una URL base antes de poder analizarse siquiera.
- Las credenciales incrustadas como `https://user:pass@host/` también se analizan, y además aparecerán en cabeceras Referer, en el historial del navegador y en los logs de los proxies. Verlas aquí es un motivo para quitarlas, no para conservarlas.
Frequently Asked Questions
¿Cómo extraigo los parámetros de consulta de una URL?
Pegue la URL. La herramienta divide la query string (todo lo que sigue a ?) en pares clave=valor individuales. Por ejemplo, ?page=2&sort=date&order=asc pasa a ser tres parámetros: page=2, sort=date, order=asc, cada uno descodificado automáticamente.
¿Para qué sirve el fragmento (#hash) de una URL?
El fragmento (todo lo que sigue a #) NO se envía al servidor: es solo del navegador. Desplaza hasta el elemento con ese identificador (id="section-2"), activa el enrutado en cliente de las SPA (React Router, Vue Router) o transporta estado en flujos de OAuth (access_token en las concesiones implícitas).
¿Cómo construyo mediante código una URL con parámetros de consulta?
Use la API URLSearchParams de JavaScript: const params = new URLSearchParams({page: 2, sort: 'date'}); url.search = params.toString(). Esto codifica correctamente los caracteres especiales de forma automática; evite concatenar cadenas a mano.
How to Use URL Parser & Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.