Qué es codificar una URL
Las direcciones web solo pueden viajar de forma segura usando un conjunto limitado de caracteres: letras sin acento, números y unos pocos símbolos. Cuando una dirección necesita incluir un espacio, un acento, una eñe o un símbolo reservado como & o ?, esos caracteres se reemplazan por una secuencia que empieza con % seguida de dos dígitos hexadecimales. A esto se le llama codificación porcentual o percent-encoding.
Por ejemplo, un espacio se convierte en %20 y la letra é en %C3%A9. Esta herramienta convierte en ambos sentidos: codifica texto normal a formato seguro para URLs y decodifica secuencias % de vuelta a texto legible. Todo ocurre en tu navegador, sin enviar nada a ningún servidor.
Cómo usar el codificador
- Elige la pestaña Codificar para pasar de texto normal a formato URL, o Decodificar para el proceso inverso.
- Escribe o pega tu texto en el cuadro grande.
- En modo codificar, elige el ámbito: solo un componente (para el valor de un parámetro) o URL completa (para arreglar una dirección entera sin romper su estructura).
- El resultado aparece al instante en la tarjeta oscura de abajo.
- Pulsa Copiar para llevarlo al portapapeles.
Si al decodificar aparece el mensaje “URL inválida”, significa que el texto tiene un % suelto o una secuencia incompleta, como %C3%A sin el último dígito.
Cómo funciona el percent-encoding
Cada carácter que no es seguro se representa por sus bytes UTF-8, y cada byte se escribe como % más su valor hexadecimal. Las letras básicas ocupan un solo byte; los acentos y otros símbolos ocupan dos o más, por eso é produce dos grupos: %C3%A9.
Ejemplo resuelto
Codifiquemos el texto café & té como componente:
c,a,fson seguros y no cambian.ése convierte en%C3%A9.- el espacio se convierte en
%20. &se convierte en%26.- el espacio se convierte en
%20. tno cambia y laéfinal vuelve a ser%C3%A9.
Uniendo todo, el resultado es caf%C3%A9%20%26%20t%C3%A9. Al decodificar esa cadena recuperas exactamente café & té.
Tabla de caracteres frecuentes
| Carácter | Se convierte en | Dónde aparece |
|---|---|---|
| espacio | %20 | frases con varias palabras |
& | %26 | separa parámetros en una URL |
? | %3F | inicio de la cadena de consulta |
= | %3D | asigna valor a un parámetro |
# | %23 | ancla dentro de la página |
/ | %2F | separador de rutas |
é | %C3%A9 | textos con acentos |
ñ | %C3%B1 | palabras en español |
encodeURI frente a encodeURIComponent
La diferencia está en qué símbolos considera “estructura”. encodeURIComponent codifica casi todo, incluidos /, ?, & y =, porque asume que le das solo una pieza suelta, como el valor de un parámetro. encodeURI respeta esos separadores porque asume que le das una dirección completa que no debe romperse. Regla práctica: usa componente para un dato individual y URL completa para una dirección ya armada.
Preguntas frecuentes
¿Qué significa %20 en una URL?
%20 es simplemente un espacio codificado. El estándar de las URLs no permite espacios en crudo, así que los navegadores y servidores los reemplazan por %20. Cuando ves %20 en la barra de direcciones, léelo mentalmente como un espacio.
¿Por qué los acentos se ven raros en las URLs?
Porque se muestran ya codificados. La á se almacena como los bytes UTF-8 C3 A1, y cada uno se escribe como %C3%A1. No hay ningún error: es la forma segura de transportar caracteres acentuados. Al decodificarlos vuelven a leerse con normalidad.
¿Cuándo debo codificar un texto?
Siempre que pongas contenido variable dentro de una URL: el valor de un parámetro de búsqueda, un nombre de archivo con espacios o un dato que un usuario escribió. Así evitas que un & o un ? se confundan con la estructura de la dirección.
¿Es seguro? ¿Codificar es lo mismo que cifrar?
No es cifrado. El percent-encoding es reversible por cualquiera y no oculta nada: solo cambia la representación de los caracteres. Nunca lo uses para proteger contraseñas ni datos sensibles; para eso se necesita cifrado real.