Constructor de URL
Monta una URL desde una configuración JSON: codificación incluida, claves repetidas soportadas
Configuración (JSON)
URL
¿Qué es el Constructor de URL?
Le pasas un objeto JSON describiendo las partes de una URL (protocolo, host, ruta, parámetros de consulta, hash) y la herramienta te devuelve la URL ya montada, con la codificación porcentual correcta. Por debajo usa la API URL nativa del navegador, así que la salida coincide exactamente con lo que un navegador emitiría si construyeras la URL en JavaScript a mano.
La razón de que exista esto: montar una URL a mano es donde se esconden los bugs. Olvidas codificar un espacio en el nombre de un cliente, codificas dos veces una barra que ya estaba codificada, mezclas ? y &, pierdes un valor por usar + en vez de %20. La especificación URL de WHATWG define una única respuesta correcta para cada entrada, y eso es lo que obtienes aquí. Las claves de consulta repetidas (por ejemplo tag=red&tag=blue) se soportan pasando un array, igual que acepta URLSearchParams.
Funciona enteramente en tu navegador. La configuración JSON y la URL montada nunca salen de tu máquina. Las reglas de codificación vienen directamente del RFC 3986 y los refinamientos de WHATWG encima. Combínalo con el Parser de URL cuando quieras hacer un ida-y-vuelta de una URL a través de un formulario estructurado.
Cómo usar el Constructor de URL
Tres pasos. Cada uno se corresponde con un botón en esta página.
Pega una configuración JSON
Pega un objeto JSON a la izquierda describiendo las partes de la URL. protocol y host son obligatorios; lo demás es opcional. Pulsa Ejemplo para cargar un caso realista con varios parámetros de consulta y un hash:
{
"protocol": "https",
"host": "api.shop.example.com",
"pathname": "/v1/orders",
"searchParams": {
"customer": "Ava Chen",
"status": "active",
"total[gte]": "49.99",
"page": "2"
},
"hash": "summary"
}Campos opcionales: port, username, password, hash. Dentro de searchParams, una cadena es un valor; un array son claves repetidas.
Lee la URL montada
El panel derecho muestra la cadena URL ensamblada. Los espacios se convierten en + en la query, los corchetes en %5B/%5D, la ruta se normaliza: la misma codificación que define el estándar URL. Se actualiza mientras escribes.
Copia o descarga
Pulsa Copiar para mandar la URL al portapapeles, o Descargar para guardarla como un archivo de texto. Usa Limpiar en el panel de entrada para empezar de cero.
Cuándo lo usarías de verdad
Crear fixtures de prueba para un cliente HTTP
Estás escribiendo un test que llama a /v1/orders con ocho parámetros de consulta, dos con espacios y uno repetido. Teclear la URL codificada a mano en el test es propenso a errores. Móntala desde un objeto JSON que puedes copiar de un log de petición real, pega la URL resultante en el assert. Listo.
Construir URLs de autorización OAuth
Las URLs de autorización OAuth meten client_id, redirect_uri, scope, state, response_type y code_challenge en la query string. El RFC 6749 exige esos nombres exactos y un redirect_uri que ya esté codificado una vez antes de que toda la URL se codifique otra vez. El constructor lo hace de forma transparente: tú le das los valores en bruto y él hace lo correcto.
Generar URLs de analítica o de compartir en un script
Cuando estás generando una URL de campaña con parámetros UTM, los valores suelen venir de una hoja de cálculo donde utm_campaign contiene espacios, ampersands y algún emoji. Dejar que el constructor de URL gestione la codificación es más seguro que una plantilla de cadenas. La salida es idéntica a la que produciría el módulo URL de Node.
Reproducir un bug de un ticket de soporte
Un cliente reporta que una búsqueda con q=résumé writer da un 500 en la API. Quieres reproducir la petición exacta. Monta la URL desde JSON, luego cúrlala. El acento en la e y el espacio se codifican igual que los habría enviado el navegador: sin adivinar.
Preguntas frecuentes
¿Cuál es la diferencia entre el Constructor de URL y concatenar cadenas yo mismo?
La codificación. https://api.example.com/orders?customer=Ava Chen no es una URL válida: el espacio la rompe. El constructor usa URLSearchParams internamente, que codifica ese espacio como + en la query y como %20 en la ruta. La concatenación a mano se equivoca tarde o temprano en una de las dos.
¿Cómo envío un parámetro dos veces (por ejemplo ?tag=red&tag=blue)?
Usa un array como valor: "tag": ["red", "blue"]. El constructor emite tag=red&tag=blue en el orden que des. Coincide con la especificación de URLSearchParams.
¿Tengo que incluir los dos puntos tras el protocolo (https:) o solo https?
Da igual. El constructor normaliza tanto "protocol": "https" como "protocol": "https:" a https:. Lo mismo para http, ftp, mailto y esquemas personalizados.
¿Puedo incluir credenciales (usuario/contraseña) en la URL?
Sí: pon "username" y "password" en la configuración. Aparecerán antes del host como user:pass@host. Ten en cuenta que el RFC 3986 §3.2.1 avisa contra esto en URLs de producción porque acaban en el historial del navegador, en logs del servidor y en cachés de proxy.
¿Por qué mi espacio se convierte en + en lugar de %20?
Los espacios en la parte de query se codifican típicamente como + según las reglas de application/x-www-form-urlencoded: eso es lo que emite URLSearchParams. Los espacios en la ruta se codifican como %20. Ambos son válidos; los servidores decodifican cualquiera de las dos formas. Si tu servidor está roto y solo entiende %20, tienes un problema más gordo que esta herramienta.
Otras herramientas de URL y JSON
Construir es una dirección. Esto es lo que también encaja bien: