Codificar / Decodificar URL

Sobre este codificador de URLs

Las URLs solo admiten un conjunto limitado de caracteres, así que los espacios, las tildes, la ñ, el signo & y casi todos los símbolos tienen que codificarse con porcentajes: un espacio se vuelve %20 y la ñ se vuelve %C3%B1. Pega tu texto, presiona Codificar o Decodificar y el resultado aparece abajo. Todo ocurre dentro de tu navegador, así que un query string con tokens o datos de clientes nunca sale de tu equipo.

Hay dos modos. El modo componente usa encodeURIComponent y escapa todo lo que no sea letra, dígito o uno de estos: - _ . ! ~ * ' ( ). Eso incluye /, ?, & y =, por lo que sirve para un valor individual que va dentro de un query string. El modo URL completa usa encodeURI, que deja intactos los caracteres estructurales para que la dirección siga funcionando como dirección. El modo componente es el que necesitas casi siempre; el de URL completa es para arreglar una dirección que te pasaron con espacios o acentos adentro.

El percent-encoding trabaja sobre bytes, no sobre caracteres, y ahí está la trampa para el español. Cada byte se convierte en un % seguido de dos dígitos hexadecimales, y una letra acentuada en UTF-8 ocupa dos bytes: la é es un solo carácter pero son los bytes C3 A9, por eso queda como %C3%A9 y no como un solo triplete. Lo mismo pasa con la ñ (%C3%B1), la ü (%C3%BC) y los signos de apertura ¿ (%C2%BF) y ¡ (%C2%A1). El RFC 3986 considera %c3%a9 y %C3%A9 equivalentes y recomienda mayúsculas al normalizar.

Dos errores explican casi todos los problemas. El primero es la doble codificación: si pasas el mismo texto por un codificador dos veces, cada % se vuelve %25 y caf%C3%A9 termina como caf%25C3%25A9. Cuando veas %25 en una URL, algo codificó un texto que ya estaba codificado, y una sola pasada de decodificación no alcanza. El segundo es el signo +. En los query strings de formularios el + significa espacio, pero decodeURIComponent no lo sabe y te devuelve un + literal. Esta herramienta convierte todo + en espacio antes de decodificar, lo cual es correcto para datos de formulario y equivocado si tu valor lleva un más de verdad — una firma en base64, o un teléfono en formato +1. En ese caso el + debía haberse codificado como %2B antes de llegar a la URL.

Un aviso sobre el dominio: las tildes y la ñ del nombre de dominio no se codifican con porcentajes. Ahí manda Punycode, así que españa.com viaja como xn--espaa-rta.com; solo la ruta, el query y el fragmento usan percent-encoding. Y si armas URLs desde código, no las concatenes a mano: los objetos URL y URLSearchParams se encargan del escapado, de unir los parámetros y de la convención del +. Esta herramienta es para inspeccionar, depurar y arreglar URLs que ya existen, no para construirlas.