Acerca de esta herramienta
Este codificador / descodificador de URL gratuito codifica texto en porcentaje para que pueda usarse sin riesgo en una URL o una cadena de consulta, y convierte una URL codificada de nuevo en texto legible.
Trata correctamente UTF-8, de modo que las letras acentuadas, los emoji y los alfabetos no latinos se codifican y descodifican sin corromperse. Todo se ejecuta en su navegador: no se sube nada.
Qué es la codificación porcentual
Una URL solo puede contener un conjunto reducido de caracteres. Todo lo demás —espacios, comillas, &, #, ?, letras acentuadas, cualquier cosa en chino o en árabe— debe reescribirse antes de poder viajar.
La codificación porcentual lo hace sustituyendo un carácter por un % seguido de su valor de byte en hexadecimal. Un espacio pasa a ser %20. Un ampersand pasa a ser %26. Un signo de interrogación pasa a ser %3F. Es la misma idea que Base64 —volver aceptables unos datos incómodos para un canal quisquilloso— pero carácter a carácter, lo que deja el resultado en gran parte legible.
Como lo que se codifica son bytes, un carácter que ocupe más de un byte en UTF-8 produce más de una secuencia. La é ocupa dos bytes y se convierte en %C3%A9. Un carácter chino suele ocupar tres y da tres secuencias. Un emoji ocupa cuatro. Por eso las URL codificadas con texto no inglés parecen tan largas.
Por qué importa: el problema del `&`
Este es el fallo que esta herramienta existe para evitar, y casi todo el mundo lo comete alguna vez.
Una cadena de consulta separa sus valores con & y =:
/buscar?q=cafe&pagina=2
Supongamos ahora que alguien busca Bed & Breakfast. Insertado en crudo:
/buscar?q=Bed & Breakfast&pagina=2
El servidor ve ahora tres parámetros: q vale Bed , luego un parámetro absurdo Breakfast, y luego pagina. La búsqueda devuelve en silencio algo equivocado. Codifique el valor primero y funciona:
/buscar?q=Bed%20%26%20Breakfast&pagina=2
De ahí la regla: codifique cada valor, no la URL entera. El & y el = que estructuran la cadena de consulta deben permanecer en crudo. El & que va dentro de un valor, no.
Codificar un valor frente a una URL entera
Esta es la distinción con la que se tropieza, y la razón de que existan dos funciones distintas en JavaScript.
encodeURIComponent codifica casi todo, incluidos /, ?, #, & y =. Úselo para una sola pieza de una URL: un término de búsqueda, un nombre de archivo, un destino de redirección, un token. Es lo que se necesita la mayor parte del tiempo, y es lo que hace esta herramienta.
encodeURI deja en paz los caracteres estructurales, porque da por hecho que se le entrega una URL completa y ya correcta y solo hay que limpiar los caracteres ilegales. Úselo sobre una URL entera, nunca sobre un valor suelto.
Si codifica una URL completa con la versión «component», cada / se convierte en %2F y la dirección deja de funcionar. Si codifica un valor con la versión «URI», su & pasa de largo y rompe la cadena de consulta. Saber cuál quería es todo el truco.
No es lo mismo que el escapado HTML
La codificación porcentual y el escapado HTML se parecen y resuelven problemas distintos.
La codificación porcentual (%20, %26) hace seguro un texto dentro de una URL. El escapado HTML (&, <) lo hace seguro dentro de un documento HTML. Una URL impresa en una página puede necesitar ambos, y en ese orden: primero codificar para la URL, después escapar el resultado para el HTML.
Y una rareza conocida: el + significa a veces un espacio. Es una herencia de los formularios HTML, donde application/x-www-form-urlencoded usa + en lugar de %20. La mayoría de los servidores aceptan ambos en una cadena de consulta, pero un + en una ruta significa un signo más literal. Si un espacio aparece como + donde no lo esperaba, la causa es un codificador de formulario.
Cómo usarla
- Pegue su texto o su URL en el campo
- Codifique o Descodifique con los botones
- Intercambie para devolver el resultado a la entrada
- Copie el resultado
Conviene saber
- Codifique valores, no URL enteras. Pasar una dirección completa por un codificador convierte cada / en %2F y la rompe.
- Nunca codifique dos veces. El % se codifica a su vez como %25, así que una segunda pasada convierte %20 en %2520 y el espacio se pierde. Es la causa más habitual de un enlace misteriosamente roto.
- Los caracteres reservados tienen significado — entre ellos :, /, ?, #, @, &, =, + y $. Son legales en una URL, pero deben codificarse cuando aparecen dentro de un valor.
- Los caracteres no reservados nunca se codifican: A–Z, a–z, 0–9, -, _, . y ~.
- Las mayúsculas del hexadecimal dan igual. %3f y %3F son idénticos; las mayúsculas son la convención.
- Un % suelto es inválido. Si falla la descodificación, busque un % que no vaya seguido de dos dígitos hexadecimales: suele indicar que la cadena se cortó.
Preguntas frecuentes
¿Qué significa %20 en una URL?
Es un espacio. El espacio no está permitido en una URL, así que se codifica en porcentaje como %20: un % seguido de 20, el valor hexadecimal del byte de un espacio. A veces verá un espacio escrito como +, herencia de la codificación de formularios; ambos se entienden en una cadena de consulta, pero solo %20 es correcto en una ruta.
¿Debo codificar toda la URL o solo una parte?
Solo las partes. Codifique cada valor que inserte *en* una URL —un término de búsqueda, un nombre de archivo, una dirección de redirección— y deje intactos los ://, /, ?, & y = que le dan su estructura. Codificar una URL completa convierte sus barras en %2F y hace que deje de resolverse.
¿Por qué se rompió mi enlace al codificarlo?
Casi siempre por doble codificación. El carácter % se codifica a su vez como %25, de modo que codificar una cadena ya codificada convierte %20 en %2520. El descodificador le devuelve entonces un %20 literal en lugar de un espacio. Descodifique una vez para ver qué tiene realmente antes de volver a codificar.
¿Por qué una letra acentuada se convierte en varios códigos %?
Porque la codificación porcentual trabaja con bytes, no con letras. En UTF-8 la é ocupa dos bytes y por eso se convierte en %C3%A9. La mayoría de los caracteres chinos, japoneses y coreanos ocupan tres y dan tres secuencias; los emoji ocupan cuatro. No hay nada mal: es sencillamente lo que pesa el carácter.
¿Qué diferencia hay entre codificación de URL y escapado HTML?
Protegen lugares distintos. La codificación de URL (%26) hace seguro un texto dentro de una dirección web. El escapado HTML (&) lo hace seguro dentro de una página HTML. Un enlace impreso en una página puede necesitar ambos, en ese orden. Usar uno donde corresponde el otro deja el problema original sin resolver.
¿Se envía mi texto a un servidor?
No. La codificación y la descodificación ocurren ambas en su navegador, así que nada de lo que pegue sale de su dispositivo. La herramienta sigue funcionando con la conexión apagada.
Herramientas relacionadas
- Codificar / descodificar Base64 — la otra codificación que aparece constantemente en tokens y data-URL
- Formateador JSON — ordenar y comprobar el JSON que viaja a menudo en esas cadenas de consulta
- Descodificador JWT — leer un token que llegó en una URL
- Extraer correos y URL — sacar todos los enlaces de un bloque de texto
