Para qué sirve
Una URL solo puede contener un subconjunto reducido de caracteres ASCII. Todo lo demás —espacios, acentos, eñes, emojis, y símbolos como «&» o «?» cuando forman parte de un valor y no de la estructura— tiene que escribirse con secuencias de escape: un signo de porcentaje seguido del código hexadecimal de cada byte. De ahí el nombre de «percent encoding», definido en el RFC 3986.
Por eso un espacio se convierte en %20 y una «ñ» en %C3%B1: dos bytes, porque en UTF-8 la eñe ocupa dos.
La confusión habitual es aplicar la codificación equivocada. Escapar una URL entera con la función de componente destroza la dirección, porque convierte también las barras y los dos puntos; y escapar un valor con la función de URL completa lo deja roto, porque respeta el «&» que va dentro y el servidor lo lee como separador de parámetros.
Cómo se calcula
Codificar consiste en convertir el texto a bytes UTF-8 y sustituir cada byte que no sea seguro por «%» seguido de sus dos dígitos hexadecimales. Descodificar es el camino inverso.
La diferencia entre los dos modos está en qué se considera seguro. El modo de componente conserva solo letras, dígitos y los signos - _ . ! ~ * ' ( ), y escapa todo lo demás. El modo de URL completa conserva además los caracteres reservados que dan estructura: : / ? # [ ] @ & = + $ , ;
El tercer modo no codifica nada: descompone la cadena de consulta y muestra cada parámetro con su valor ya descodificado, que es la forma rápida de leer una URL larga.
carácter → bytes UTF-8 → %XX por cada byte«ñ» son los bytes C3 y B1 en UTF-8, así que se escribe %C3%B1.
espacio → %20 · & → %26 · = → %3D · ? → %3FLos escapes más frecuentes al meter un valor dentro de un parámetro.
Ejemplo resuelto
Una búsqueda con espacios y acentos
- URL de partida
- https://ejemplo.com/buscar?q=café con leche
- En modo URL completa se respetan «:», «/», «?» y «=», que dan estructura a la dirección.
- El espacio no es válido y se convierte en %20.
- La «é» ocupa dos bytes en UTF-8 (C3 y A9), así que se convierte en %C3%A9.
- El resultado es https://ejemplo.com/buscar?q=caf%C3%A9%20con%20leche
- Si se hubiera usado el modo de componente sobre la URL entera, también se habrían escapado «://» y «?», y la dirección habría dejado de funcionar.
https://ejemplo.com/buscar?q=caf%C3%A9%20con%20leche
Qué se escapa en cada modo
La regla práctica: si estás construyendo un valor, usa el modo de componente. Si estás arreglando una dirección que ya existe, usa el de URL completa.
| Carácter | Valor de parámetro | URL completa |
|---|---|---|
| espacio | %20 | %20 |
| / | %2F | sin cambios |
| ? | %3F | sin cambios |
| & | %26 | sin cambios |
| = | %3D | sin cambios |
| # | %23 | sin cambios |
| ñ | %C3%B1 | %C3%B1 |
El caso del signo «+»
En los formularios HTML enviados con el tipo application/x-www-form-urlencoded, el espacio se codifica como «+» en lugar de como %20. Es una convención heredada, distinta de la del RFC 3986.
Eso hace que un «+» dentro de un valor sea ambiguo: puede ser un espacio codificado a la antigua o un signo más literal. Para evitarlo, un «+» que forme parte del dato —en un número de teléfono, por ejemplo— debe escaparse siempre como %2B.
Preguntas frecuentes
¿Qué significa %20 en una URL?
Es un espacio. Las URLs no admiten espacios, así que se sustituyen por su código en hexadecimal precedido de un signo de porcentaje: el espacio es el carácter 32 en ASCII, que en hexadecimal es 20. Por eso al pegar una dirección con espacios el navegador la reescribe con %20.
¿Cuándo uso «valor de parámetro» y cuándo «URL completa»?
Usa el modo de valor cuando quieras meter un dato dentro de un parámetro: escapa «&», «=», «?» y «/», que si no romperían la estructura. Usa el de URL completa cuando quieras arreglar una dirección entera con espacios o acentos sin destruir su sintaxis. Aplicar el primero a una URL completa la deja inservible.
¿Por qué me da error al descodificar?
Casi siempre porque hay un «%» suelto o una secuencia incompleta. El signo de porcentaje debe ir seguido de dos dígitos hexadecimales; si aparece solo, o le sigue un solo carácter, la cadena no es válida. Suele pasar al copiar media URL o al descodificar un texto que en realidad no estaba codificado.
¿Es lo mismo codificar en URL que en Base64?
No. El percent encoding escapa únicamente los caracteres problemáticos y deja el resto legible, así que el resultado se sigue leyendo. Base64 convierte cualquier dato binario en un alfabeto de 64 caracteres y siempre hace crecer el tamaño un 33 %. Se usan para cosas distintas, aunque a veces se combinan.
¿El texto que pego se envía a algún servidor?
No. Todo se procesa en tu navegador con las funciones nativas de JavaScript. Puedes pegar URLs con tokens o identificadores de sesión con la seguridad de que no salen de tu equipo, no se guardan y no se registran.
Fuentes
Toda la información de esta página se refiere a: Codificador y descodificador de URL.