Codificar / Decodificar URL

Codifica o decodifica componentes de URL.

...

Por qué las URL necesitan codificación

Una URL solo puede contener un conjunto limitado de caracteres ASCII. Todo lo demás (espacios, diéresis, emoji y caracteres con significado especial como &, = y ?) debe codificarse en porcentaje: cada byte de la representación UTF-8 del carácter pasa a ser % seguido de dos dígitos hexadecimales. Sáltate este paso y una consulta de búsqueda como coffee & cream rompe en silencio tu cadena de consulta: el & inicia un nuevo parámetro y la mitad de tu valor se esfuma.

Esta herramienta usa encodeURIComponent, la variante estricta pensada para partes individuales de una URL. coffee & cream se convierte en coffee%20%26%20cream, y decodificar lo revierte exactamente.

Caracteres habituales y sus codificaciones

CarácterCodificadoPor qué importa en una URL
espacio%20Los espacios terminan la URL en muchos contextos
&%26Separa parámetros de consulta
=%3DSepara el nombre y el valor del parámetro
?%3FInicia la cadena de consulta
#%23Inicia el fragmento; todo lo posterior se descarta de las peticiones
/%2FSeparador de segmentos de ruta
+%2BSe decodifica como espacio en datos de formulario si se deja en crudo
ü%C3%BCNo ASCII: dos bytes en UTF-8, dos secuencias %

encodeURI frente a encodeURIComponent

JavaScript trae dos codificadores, y confundirlos es un error clásico. encodeURI es para una URL completa: deja intactos :, /, ?, # y & para que la estructura de la URL sobreviva. encodeURIComponent, que es lo que usa esta herramienta, es para un valor único dentro de una URL y codifica todos esos. Regla práctica: ¿construyes un parámetro de consulta? Siempre encodeURIComponent. ¿Codificas una URL entera que alguien escribió? encodeURI. Si codificas una URL completa con la variante de componente, el https%3A%2F%2F del principio te dice qué salió mal.

Trampas que conviene conocer

  • Doble codificación: codificar dos veces convierte %20 en %2520. Si ves secuencias %25 por ahí, algo codificó un texto ya codificado.
  • Decodificar entradas inválidas: un % suelto que no va seguido de dos dígitos hexadecimales (como 100% legit) no se puede decodificar; la herramienta lo informa en lugar de adivinar.
  • + no siempre es un espacio: solo en los datos de formulario application/x-www-form-urlencoded. decodeURIComponent deja correctamente + como +.

Todo corre por completo en tu navegador: ninguna URL que pegues se envía nunca a un servidor. Herramientas relacionadas: escapa texto para marcado con el codificador de HTML, o construye rutas de URL limpias con el generador de slugs.

Preguntas frecuentes

¿Qué caracteres se codifican en la URL?
Todo salvo letras, dígitos y - _ . ~ se convierte en secuencias %: el espacio pasa a %20, & pasa a %26, y los caracteres no ASCII pasan a una secuencia % por byte UTF-8 (ü → %C3%BC).
¿Cuál es la diferencia entre encodeURI y encodeURIComponent?
encodeURI codifica una URL completa y conserva los caracteres estructurales como :, /, ?, #. encodeURIComponent (que usa esta herramienta) codifica un valor único y escapa también esos. Usa la variante de componente para los parámetros de consulta.
¿Por qué a veces %20 aparece como + en su lugar?
Los envíos de formularios HTML (application/x-www-form-urlencoded) codifican históricamente los espacios como +. La codificación porcentual propiamente dicha usa %20. Ambos significan "espacio" en las cadenas de consulta, pero %20 es la opción segura y universal.
¿Qué es la doble codificación?
Pasar por el codificador un texto ya codificado: %20 se convierte en %2520 porque el propio % se codifica. Es un error común cuando varias capas de un sistema codifican cada una. Codifica exactamente una vez, en el último momento.
¿Por qué falla la decodificación de mi cadena?
Un % que no va seguido de dos dígitos hexadecimales es una codificación porcentual mal formada: "100% legit" no se puede decodificar. Corrígelo o codifica el % en crudo como %25 primero.