Codificador y decodificador de URL

Cómo usarlo

En esta página hay dos herramientas. La de arriba codifica o decodifica una cadena; la de abajo, «Analizador de la estructura de la URL», toma una URL completa y la muestra dividida en sus partes. Ninguna de las dos influye en la otra.

En la de arriba eliges «Codificar» o «Decodificar» en «Dirección» y después fijas dos cosas:

• Tipo de codificación: «Un valor» es para un fragmento que vas a insertar en una URL, como el valor de un parámetro de consulta; «URL completa», para una cadena que ya tiene forma de dirección. La diferencia se explica en el apartado siguiente.
• + como espacio (application/x-www-form-urlencoded): márcala solo cuando trabajes con los datos que envía un formulario HTML.

Al codificar, lo que escribes en «Texto original» sale en «Resultado codificado»; al decodificar, la «Cadena codificada» sale en «Resultado decodificado». € se codifica como %E2%82%AC: ese carácter ocupa 3 bytes en UTF-8, y por eso le corresponden tres %XX. «Enviar el resultado a decodificar» y «Enviar el resultado a codificar» llevan lo que acaba de salir a la entrada del sentido contrario.

«Un valor» y «URL completa» dejan intactos caracteres distintos

Los dos tipos sustituyen los caracteres que no pueden ir tal cual en una URL por % seguido de dos cifras hexadecimales (la codificación por porcentaje). Lo que los separa es el trato que dan a los caracteres que marcan la estructura de la URL, como /, ? y &. «Un valor» da el mismo resultado que encodeURIComponent de JavaScript, y «URL completa», el mismo que encodeURI.

Con la misma entrada, https://example.com/café?q=crème brûlée&page=1#menü, cada tipo da esto:

• URL completa: https://example.com/caf%C3%A9?q=cr%C3%A8me%20br%C3%BBl%C3%A9e&page=1#men%C3%BC
• Un valor: https%3A%2F%2Fexample.com%2Fcaf%C3%A9%3Fq%3Dcr%C3%A8me%20br%C3%BBl%C3%A9e%26page%3D1%23men%C3%BC

La primera se puede usar directamente como dirección. La segunda no, pero cabe entera como valor de un parámetro de otra URL (?redirect=...). En el caso opuesto, si quieres pasar la búsqueda a/b&c como valor de consulta y usas «URL completa», el & se queda como está y se lee como el comienzo del parámetro siguiente. Ahí toca usar «Un valor» para obtener a%2Fb%26c.

Al decodificar la diferencia es la misma: «URL completa» no deshace la codificación de los caracteres de estructura. Con a%2Fb%3Fc%26d%23e%20f, «Un valor» devuelve a/b?c&d#e f y «URL completa» devuelve a%2Fb%3Fc%26d%23e f. Si después de decodificar siguen ahí %2F o %26, prueba a cambiar el tipo de codificación a «Un valor».

Un detalle que conviene recordar: ni siquiera «Un valor» cambia ! ' ( ) *. Si el valor va a un servidor que exige codificar también esos caracteres, tendrás que sustituirlos tú en el resultado por %21, %27, %28, %29 y %2A.

+ como espacio

Los datos que envía un <form> de HTML (application/x-www-form-urlencoded) escriben el espacio como + y no como %20. Marca «+ como espacio» cuando tengas que generar o leer ese formato.

Con la opción marcada, un + que ya estuviera en el original se convierte en %2B para que no se confunda con un espacio. «URL completa» normalmente deja el + como está, pero con esta opción también lo pasa a %2B. Al decodificar sin la opción, un + es simplemente un +. Si copias de la dirección de una página de resultados un valor como q=crème+brûlée y, al decodificarlo, el + sigue ahí, es justo el caso en que hay que marcar la opción. En la ruta de una URL o en un nombre de archivo el + no significa espacio, así que ahí déjala sin marcar.

Qué valores muestra el analizador de la estructura

En el campo «URL completa», escribe una URL entera que empiece por el protocolo, como https://. Verás «Protocolo», «Host» y «Ruta», y además «Cadena de consulta» y «Hash» cuando los haya. Debajo, una tabla lista los parámetros de consulta, uno por fila, con su «Clave» y su «Valor (decodificado)». Si falta el protocolo, como en example.com/path, aparece «Esto no es una URL completa con protocolo (como https://).».

Lo que se muestra no es lo que tecleaste letra por letra, sino la URL tal como la interpreta y normaliza el navegador. Con https://Example.COM:443/a/../b/café?q=hello%20world&tag=a&tag=b&x=1+2#top sale esto:

La tabla tiene cuatro filas: q = hello world, tag = a, tag = b y x = 1 2. Una clave que se repite ocupa tantas filas como veces aparece. Y, como se ve en el valor de x, esta tabla lee siempre el + como espacio, esté como esté la casilla «+ como espacio» de arriba: el estándar de URL establece que la cadena de consulta se interpreta con el formato de los datos de formulario.

Dos cosas más. Los dominios con caracteres que no son ASCII aparecen en «Host» en Punycode (https://café.example/ → xn--caf-dma.example). Y si la dirección lleva usuario y contraseña, como http://user:pw@host:8080/p, esa parte no se muestra en ningún campo: en «Host» solo sale host:8080.

Entradas que no se pueden decodificar

La decodificación solo sale bien si detrás de cada % hay dos cifras hexadecimales y los bytes así reunidos forman caracteres UTF-8. En cuanto algo no cuadra, no hay resultado y aparece un mensaje que empieza por «La codificación por porcentaje no es válida.».

Codificar, en cambio, no falla nunca. Incluso una entrada que por sí sola no llega a ser un carácter, como medio emoji, se codifica como el carácter de sustitución (%EF%BF%BD) en lugar de dar error.