CodeKitHub¿Qué es esta herramienta?
La codificación de URL (codificación porcentual) sustituye los caracteres que no están permitidos en las URL por un % seguido de su valor en bytes en formato hexadecimal: un espacio se convierte en %20 y «你» se convierte en %E4%BD%A0. Sin ella, caracteres como los espacios, «&», «?» y el texto no ASCII romperían la estructura de la URL o serían malinterpretados por los servidores.
Hay dos necesidades habituales, y esta herramienta da respuesta a ambas: codificar un valor que se incluye dentro de un parámetro de consulta (modo «componente»: codifica también /, ? y =) y codificar una URL completa conservando su estructura (modo «URL completa»: deja intactos ://, ? y &).
¿Por qué utilizarlo?
- Crea cadenas de consulta de forma segura: los datos introducidos por el usuario que contengan los caracteres «&», «=» o espacios no provocarán errores en tu URL.
- Descifra las URL codificadas largas de los registros, las herramientas de análisis o las cadenas de redireccionamiento para ver qué dicen realmente.
- Gestión correcta del UTF-8 para el chino, los emojis y otros textos no ASCII.
- Dos modos para que no codifiques por error los caracteres «:» y «/» de una URL completa.
- Gratis, al instante y sin necesidad de subir archivos.
Cómo utilizarlo
- Pega tu texto o la URL en el cuadro de texto.
- Selecciona el modo: «Componente» para los valores que se incluyen en los parámetros de consulta, «URL completa» para las URL completas.
- Haz clic en «Codificar» o «Decodificar».
- Copia el resultado.
Ejemplo
Entrada
https://example.com/search?q=hello world & 你好Resultado
Component mode: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%20%26%20%E4%BD%A0%E5%A5%BD
Full URL mode: https://example.com/search?q=hello%20world%20&%20%E4%BD%A0%E5%A5%BDEl modo «componente» también codifica los caracteres de estructura; el modo «URL completa» los conserva.
Casos de uso habituales
- Crear una URL que se pueda compartir en la que un término de búsqueda o un valor de filtro provenga de la entrada del usuario y pueda contener espacios, el símbolo «&» u otros caracteres especiales.
- Descifrar una URL larga de seguimiento o redireccionamiento procedente de un correo electrónico o una campaña publicitaria para ver el destino real y los parámetros antes de hacer clic en ella.
- Depurar por qué un servidor no lee correctamente un parámetro de consulta; a menudo, el problema radica en un carácter reservado que debería haberse codificado, pero no se ha hecho.
- Preparación de un valor que no esté en inglés (chino, japonés, árabe, etc.) para utilizarlo en una cadena de consulta de una URL.
encodeURIComponent frente a encodeURI, en la práctica
Estos se corresponden directamente con los dos modos de esta herramienta y se ajustan a funciones reales de JavaScript que los desarrolladores ya conocen: encodeURIComponent (modo «componente») codifica todo excepto un pequeño conjunto de caracteres no reservados, lo que garantiza que cualquier valor individual que se inserte en una URL sea seguro; es lo que se utiliza para un parámetro de consulta, un segmento de ruta o un valor de fragmento de hash. encodeURI (modo URL completa) deja sin codificar los caracteres estructurales de la URL (:, /, ?, #, &, =) tal y como están, ya que da por hecho que se está codificando una URL completa y ya estructurada, no un valor sin procesar; si se utiliza en un único valor de parámetro, no se codificarían los caracteres & o = que dicho valor pudiera contener, lo cual es el error más común que comete la gente al elegir el modo incorrecto.
Caracteres reservados frente a caracteres no reservados
La especificación de las URL (RFC 3986) divide los caracteres en dos grupos: los caracteres no reservados (letras, dígitos, - _ . ~) son siempre seguros y nunca se codifican, mientras que los caracteres reservados (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) tienen un significado especial en la estructura de las URL y solo necesitan codificarse cuando aparecen como datos literales en lugar de como signos de puntuación estructurales. Esta es precisamente la razón por la que existen los dos modos: el modo de componentes trata los caracteres reservados como datos que hay que proteger, mientras que el modo de URL completa los trata como estructura que hay que preservar. Comprender esta distinción resulta más útil que memorizar cuándo utilizar cada modo, ya que explica por qué un mismo carácter (como &) a veces se codifica y otras veces se deja tal cual, dependiendo del papel que desempeñe en la URL concreta.
Preguntas frecuentes
¿Cuándo debo utilizar el modo de componentes y cuándo el modo de URL completa?
Modo «componente» (encodeURIComponent) al codificar un único valor que se incluye dentro de un parámetro de consulta: codifica los caracteres /, ?, & y = para que no provoquen errores en la URL. Modo «URL completa» (encodeURI) al codificar una URL completa: conserva los caracteres estructurales para que la URL siga funcionando.
¿Por qué apareció %20 en lugar de + para los espacios?
Ambas opciones son válidas en distintos contextos. %20 es la codificación porcentual universal para un espacio; + solo significa «espacio» dentro de las cadenas de consulta que utilizan el formato más antiguo «application/x-www-form-urlencoded». Esta herramienta utiliza %20, que funciona en todas partes.
¿Por qué falla la decodificación y se produce un error?
La entrada contiene una secuencia de porcentajes con formato incorrecto, como un % que no va seguido de dos dígitos hexadecimales. Esto suele ocurrir cuando una URL se ha cortado o se ha descodificado dos veces. Corrige o elimina la secuencia de porcentajes errónea.
¿Qué es la codificación doble?
Codificación de texto ya codificado: %20 se convierte en %2520 porque el propio símbolo % se codifica como %25. Es un error habitual: si el resultado descodificado sigue conteniendo códigos %, descodifícalo una vez más.
¿Admite caracteres chinos y emojis?
Sí. El texto se codifica en bytes UTF-8, por lo que «你好» se convierte en %E4%BD%A0%E5%A5%BD y se descodifica perfectamente, igual que lo hacen los navegadores.