Codificación y decodificación de URL, explicadas para desarrolladores
Escribe un espacio en una URL, o una palabra en cirílico, o un signo & (ampersand) que pertenece a tus datos y no a la dirección en sí, y algo tiene que ceder. La web solo garantiza un transporte seguro para un conjunto pequeño y predecible de caracteres ASCII. Todo lo demás debe envolverse en un formato sobre el que routers, servidores y navegadores estén de acuerdo. Ese formato es el percent-encoding (codificación por porcentaje), más conocido como codificación de URL, y esta página te permite convertir texto en ambos sentidos directamente en tu navegador.
Qué es realmente el percent-encoding
La regla es mecánica y fácil de seguir. Cualquier carácter que no puede aparecer de forma literal se reemplaza por un signo % seguido de dos dígitos hexadecimales que representan el valor del byte de ese carácter. Un espacio se convierte en %20. Un signo más se convierte en %2B. El signo de número se convierte en %23. Cuando un carácter se asigna a varios bytes, como ocurre con la mayoría del texto no ASCII bajo UTF-8, simplemente obtienes varios tripletes seguidos: el signo del euro se convierte en %E2%82%AC. La decodificación invierte el proceso, leyendo cada triplete de vuelta a su byte original.
Esta convención está definida en la especificación de URI (RFC 3986) y es deliberadamente aburrida. Lo aburrido es la clave. Todo cliente y servidor HTTP que se comporte bien en el planeta implementa las mismas reglas, de modo que un enlace correctamente codificado en un lugar llega intacto a cualquier otro sitio.
Por qué tiene que existir
Las URL transportan dos tipos de caracteres con funciones muy distintas. Los caracteres reservados como /, ?, #, &, = y : son estructurales. Le indican a un analizador (parser) dónde termina la ruta y comienza la cadena de consulta (query string), o dónde se detiene un parámetro y empieza el siguiente. Si tus datos reales contienen uno de esos símbolos, debe codificarse para que el analizador no lo confunda con puntuación. Una referencia de pedido como A&B/2024 insertada en crudo dentro de una cadena de consulta se interpretaría erróneamente como dos parámetros y un segmento de ruta.
Luego están los caracteres inseguros y no ASCII: espacios, comillas, corchetes angulares, letras acentuadas, emoji, cualquier cosa fuera del rango ASCII básico. Estos no tienen ninguna razón para aparecer literalmente en una URL, ya sea porque se corrompen en tránsito o porque no tienen una representación definida. Codificarlos mantiene los enlaces limpios y predecibles en lugar de dejar el resultado al azar.
Dónde aparece en el trabajo real
Las cadenas de consulta son el caso clásico. Todo valor que añadas a ?key=... debería codificarse para que la entrada del usuario no pueda romper la estructura. Lo mismo se aplica a los envíos de formularios HTML enviados como application/x-www-form-urlencoded, donde el navegador codifica los valores de los campos automáticamente (y, por convención histórica, convierte los espacios en + en lugar de %20). También te lo encontrarás al construir enlaces que apuntan a páginas con títulos no latinos, al construir peticiones de API a mano, al pasar destinos de redirección como parámetros, y al depurar por qué una petición que se ve bien en la barra de direcciones llega corrupta al servidor.
encodeURI frente a encodeURIComponent
JavaScript incluye dos codificadores, y elegir el equivocado es un error frecuente. La diferencia está en el alcance. encodeURIComponent es para una sola pieza de datos, como un valor de consulta. Codifica casi todo, incluidos los caracteres reservados /, ?, :, @, &, =, + y #. Eso es exactamente lo que quieres cuando los datos pueden contener esos símbolos como texto corriente.
encodeURI es para una dirección completa que pretendes que siga funcionando. Deja en paz los caracteres estructurales, de modo que las barras, los dos puntos y los signos de interrogación que mantienen unida la URL sobreviven. Úsalo cuando tengas una URL completa y solo quieras limpiar espacios o caracteres no ASCII; recurre a encodeURIComponent siempre que estés insertando un valor dentro de una URL más grande. Una regla práctica sencilla: codifica el enlace completo con encodeURI, y codifica las partes que insertas con encodeURIComponent.
Todo permanece en tu máquina
Esta herramienta se ejecuta enteramente en tu navegador. El texto que pegas se codifica o decodifica localmente con las mismas rutinas estándar y nunca viaja a un servidor, lo que la hace segura para tokens, parámetros firmados o cualquier otra cosa que preferirías no enviar por la red. Si trabajas con otras transformaciones de texto, el conversor Base64 está justo al lado, y puedes explorar el conjunto completo de herramientas para desarrolladores para más utilidades del día a día.
Preguntas frecuentes
¿Qué significa %20 en una URL?
Es un espacio codificado. El carácter de espacio no está permitido de forma literal en una URL, por lo que se reemplaza por un signo de porcentaje y el valor hexadecimal 20, que es el valor del byte de un espacio.
¿Por qué a veces veo un signo más en lugar de %20?
Los datos de formularios HTML del tipo application/x-www-form-urlencoded codifican los espacios como un signo más por convención histórica. En una ruta o consulta normal, un espacio se codifica como %20. Ambos se decodifican de vuelta a un espacio en su contexto correspondiente.
¿Cuándo debería usar encodeURIComponent en lugar de encodeURI?
Usa encodeURIComponent para un único valor que estés insertando en una URL, como un parámetro de consulta, porque también codifica los caracteres reservados. Usa encodeURI para una dirección completa cuando quieras preservar las barras, los dos puntos y los signos de interrogación que la mantienen unida.
¿La codificación de URL cambia el significado de mis datos?
No. La codificación es totalmente reversible. Decodificar el resultado devuelve exactamente el texto original, byte por byte, siempre que se use el mismo conjunto de caracteres en ambos extremos.
¿Cómo se manejan los caracteres no ASCII como acentos o emoji?
Primero se convierten en bytes UTF-8 y luego cada byte se convierte en su propio triplete por porcentaje. Por lo tanto, una sola letra acentuada o un emoji pueden expandirse en varios tripletes en la salida codificada.
¿Se envía mi texto a un servidor cuando uso esta herramienta?
No. La codificación y la decodificación ocurren enteramente en tu navegador. Nada de lo que pegas se sube, así que es seguro usarla con cadenas privadas o sensibles.