Codificar y decodificar URL online: codificación porcentual

Qué es la codificación de URL

Una dirección web solo puede contener un conjunto reducido de caracteres: letras, dígitos y unos pocos símbolos, como -, ., _ y ~. Otros caracteres tienen funciones especiales. ? inicia la query string, & separa los parámetros, = une un nombre con su valor y # inicia un fragmento. Los espacios y las letras que no están en el alfabeto inglés, como la ñ o las vocales con tilde, no están permitidos.

La codificación de URL, también llamada codificación porcentual o percent encoding, resuelve el problema. Cada carácter no seguro se convierte en bytes UTF-8, y cada byte se escribe como % seguido de dos dígitos hexadecimales. Un espacio pasa a ser %20, & pasa a ser %26, é pasa a ser %C3%A9 y ñ pasa a ser %C3%B1.

Cómo codificar y decodificar una URL

Codificar. Escribe o pega texto en Texto plano. La versión codificada aparece en Codificado para URL. Pulsa Copiar para llevártela.

Decodificar. Pega texto codificado en Codificado para URL. El texto legible aparece a la izquierda.

Elige qué vas a codificar con el menú ¿Qué vas a codificar?, debajo de los cuadros:

Un valor o parte de una URL (encodeURIComponent) es la opción correcta casi siempre. Codifica todo excepto las letras, los dígitos y - _ . ~. Úsala para términos de búsqueda, valores de parámetros y segmentos de ruta.
Una URL completa, conserva : / ? & = (encodeURI) respeta la estructura de la dirección y solo codifica los espacios, las letras fuera del alfabeto inglés y caracteres parecidos.
Datos de formulario, espacios como + (x-www-form-urlencoded) reproduce lo que envía un navegador al enviar un formulario HTML. Los espacios pasan a ser + y, al decodificar, + vuelve a ser un espacio.

Borrar vacía los dos cuadros.

Cómo funciona

Primero, el texto se convierte en bytes UTF-8. Cada byte no permitido se sustituye por % y su valor en hexadecimal. La letra é ocupa dos bytes en UTF-8, así que se convierte en dos secuencias: %C3%A9. Un emoji ocupa cuatro bytes, así que se convierte en cuatro.

En modo componente, esta herramienta va un paso más allá que la función básica del navegador. También codifica ! ' ( ) *, como indica el RFC 3986. Técnicamente esos caracteres están permitidos, pero han dado problemas en algunos servidores y programas de correo.

Decodificar funciona al revés. Las secuencias %XX seguidas se agrupan en bytes y se leen como UTF-8. Por eso, si una web antigua codificó la ñ en Latin-1 como %F1, ese byte suelto no es UTF-8 válido: a%F1o se decodifica como a�o, con un carácter de sustitución en lugar de año. La versión UTF-8 correcta es a%C3%B1o.

Ejemplos

Entrada	Componente	URL completa	Datos de formulario
`hello world`	`hello%20world`	`hello%20world`	`hello+world`
`Tom & Jerry`	`Tom%20%26%20Jerry`	`Tom%20&%20Jerry`	`Tom+%26+Jerry`
`a+b=c`	`a%2Bb%3Dc`	`a+b=c`	`a%2Bb%3Dc`
`50% off`	`50%25%20off`	`50%25%20off`	`50%25+off`
`café`	`caf%C3%A9`	`caf%C3%A9`	`caf%C3%A9`
`it's (ok)*!`	`it%27s%20%28ok%29%2A%21`	`it's%20(ok)*!`	`it%27s+%28ok%29%2A%21`

Con texto en español: canción del año da canci%C3%B3n%20del%20a%C3%B1o como componente y canci%C3%B3n+del+a%C3%B1o como datos de formulario. Los signos de apertura también se codifican: ¿Qué tal? da %C2%BFQu%C3%A9%20tal%3F.

Donde mejor se ve la diferencia es en una dirección completa. https://example.com/a b?q=1&r=é en modo URL completa se convierte en https://example.com/a%20b?q=1&r=%C3%A9, que sigue funcionando como enlace. En modo componente, el mismo texto se convierte en https%3A%2F%2Fexample.com%2Fa%20b%3Fq%3D1%26r%3D%C3%A9, que solo es correcto cuando la dirección entera es a su vez el valor de un parámetro, como el destino de una redirección. Del mismo modo, https://ejemplo.com/búsqueda?q=niño en modo URL completa da https://ejemplo.com/b%C3%BAsqueda?q=ni%C3%B1o.

Consejos y límites

Codifica valores, no enlaces enteros. Construye primero el enlace y después codifica solo las partes que insertas.
Cuidado con la doble codificación. Si ves %2520, el texto se codificó dos veces. Decodifícalo una vez.
El + no siempre es un espacio. Solo significa espacio en los datos de formulario. En una ruta, + es un signo más normal. Elige el modo adecuado antes de decodificar.
Codificar no es ocultar. Cualquiera puede leer un texto codificado. No pongas contraseñas en los enlaces.
Las mayúsculas no importan en las secuencias. %c3%a9 y %C3%A9 significan lo mismo. Lo habitual es escribirlas en mayúsculas.

Otras formas de hacerlo

JavaScript. encodeURIComponent('Tom & Jerry') devuelve Tom%20%26%20Jerry. Usa decodeURIComponent para revertirlo. Ten en cuenta que da error con una secuencia rota como %zz, mientras que esta herramienta la deja como está.

Python. urllib.parse.quote('Tom & Jerry', safe='') devuelve Tom%20%26%20Jerry, y urllib.parse.quote_plus devuelve Tom+%26+Jerry.

Excel. =ENCODEURL(A1) aplica la codificación porcentual al texto de la celda A1 (Excel 2013 y posteriores en Windows). En Excel en español, la función se llama URLCODIF.

Línea de comandos. curl --data-urlencode "q=Tom & Jerry" codifica el valor de un formulario al enviarlo.

Herramientas relacionadas

¿Estás creando enlaces de campaña? El generador de UTM codifica cada etiqueta por ti. Para convertir un título en una ruta limpia, usa el generador de slugs. Para datos binarios dentro de una URL, la codificación Base64 con la opción apta para URL suele encajar mejor.

Codificador de URL: preguntas y respuestas

¿Qué significa %20 en una URL?

%20 es un espacio codificado. Un espacio no está permitido en una dirección web, así que se escribe como un signo de porcentaje seguido del valor de su byte en hexadecimal, que es 20. En los datos de formulario, el espacio suele escribirse como + en su lugar.

¿Codifico la URL entera o solo una parte?

Normalmente solo la parte que insertas, como un término de búsqueda o el valor de un parámetro. Si codificas una URL entera como componente, también se codifican los caracteres : y /, y el enlace deja de funcionar. Usa el modo de URL completa solo cuando tengas una dirección completa que contenga espacios o letras con tilde.

¿Por qué aparece %25 en mi texto después de codificarlo?

%25 es un signo de porcentaje codificado. Si codificas un texto que ya estaba codificado, cada % se convierte en %25. Por ejemplo, a%20b codificado otra vez pasa a ser a%2520b. Decodifica primero y después codifica una sola vez.

¿Puede decodificar una URL rota o codificada a medias?

Sí. Las secuencias válidas, como %C3%A9, se decodifican, y lo que no es una secuencia válida, como un signo % suelto, se deja tal cual. El texto completo nunca falla por un solo carácter incorrecto.