Las direcciones web tienen un alfabeto muy corto
La norma que describe cómo se escribe una dirección de internet, la RFC 3986, admite un repertorio sorprendentemente limitado de caracteres. Todo lo demás —espacios, acentos, la ñ, los símbolos de puntuación menos habituales— debe representarse de otra forma, y esa forma es el percent-encoding: el símbolo de porcentaje seguido del valor hexadecimal de cada byte. Un espacio se escribe %20, un signo de interrogación %3F. La traducción es exacta y reversible, así que el destinatario recupera el texto tal cual lo escribiste.
Dos familias de caracteres
Los no reservados
Las letras de la A a la Z en ambas cajas, los diez dígitos y cuatro símbolos —el guion, el punto, el guion bajo y la virgulilla— pueden aparecer siempre tal cual. Nunca hace falta tocarlos y, de hecho, codificarlos innecesariamente está desaconsejado porque dos direcciones que solo se diferencian en eso deberían considerarse la misma.
Los reservados
Otro grupo de caracteres sí está permitido, pero tiene un trabajo asignado: la barra separa los tramos de la ruta, el interrogante abre la lista de parámetros, el ampersand separa un parámetro del siguiente, el igual une un nombre con su valor y la almohadilla marca el ancla dentro de la página. Aquí está la clave de todo el asunto: si uno de esos símbolos forma parte de un valor en vez de cumplir su función estructural, hay que codificarlo. De lo contrario el servidor leerá la dirección de una forma que tú no pretendías.
El eterno lío del espacio: %20 frente a +
Verás las dos formas y ambas son correctas, pero no en el mismo sitio. El %20 es la codificación general y funciona en cualquier parte de la dirección. El signo de suma viene de los formularios web clásicos, que envían sus datos con un formato propio en el que el espacio se representa así, y solo tiene ese significado dentro de la parte de consulta, jamás en la ruta.
La consecuencia práctica conviene grabársela: si tu valor contiene un signo de suma de verdad, como un prefijo telefónico internacional, tienes que codificarlo como %2B. Si no lo haces, quien reciba el parámetro verá un espacio donde tú querías un más.
encodeURI o encodeURIComponent
El navegador ofrece dos funciones y elegir mal es la fuente número uno de enlaces rotos. encodeURI asume que le pasas una dirección completa y por eso deja intactos los caracteres reservados: sirve para arreglar una URL que ya está montada y contiene espacios o acentos. encodeURIComponent asume lo contrario, que le pasas una pieza suelta, y codifica también las barras, los interrogantes y los ampersands. Es la que necesitas para cada valor que insertas en un parámetro, y es la que usa esta herramienta.
Acentos, ñ y UTF-8
El percent-encoding trabaja con bytes, no con letras, así que primero hay que decidir cómo se convierte el texto en bytes. El estándar de facto es UTF-8, donde los caracteres del inglés ocupan un byte y el resto ocupan dos, tres o cuatro. Por eso una ñ genera dos grupos de porcentaje (%C3%B1) y un emoji puede generar cuatro. Si al decodificar aparecen símbolos extraños en lugar de los acentos, casi siempre el problema es que algo por el camino asumió una codificación antigua distinta de UTF-8.
Tres formas de romper un enlace
- Codificar dos veces. El resultado se reconoce por la secuencia %2520: el porcentaje del %20 se volvió a codificar. Suele pasar cuando un sistema codifica un valor que otro ya había codificado antes.
- Codificar la dirección entera con la función del valor. Terminas con las barras convertidas en %2F y un enlace que ya no apunta a ninguna parte.
- Olvidar el ampersand dentro de un valor.Un texto de búsqueda con un & sin codificar parte el parámetro en dos y el servidor recibe algo que no existe.
Cuando tengas que limpiar cadenas para una dirección, el generador de slugs y el eliminador de acentos te ahorran trabajo. Para otros formatos de codificación mira el codificador Base64; para insertar texto en una página, escapar HTML; y si necesitas convertir el enlace en un código escaneable, tienes el generador de códigos QR. Todo el catálogo está en herramientas.