Caracteres reservados de URL explicados

La especificación de URL (RFC 3986) divide los caracteres en reservados (reserved) y no reservados (unreserved). Conocer esta división deja claro cuándo debes codificar y cuándo no hace falta.

Caracteres no reservados (seguros tal cual)

Las letras, los dígitos y los cuatro símbolos - _ . ~ pueden aparecer en cualquier posición sin codificarse. Codificarlos no cambiaría su significado, así que normalmente se dejan tal cual.

Caracteres reservados (con significado estructural)

Los caracteres reservados dividen una URL en partes. Para usar uno como dato literal, debes codificarlo.

• : / ? # [ ] @ — separan las secciones principales (scheme, path, query, fragment, etc.)
• ! $ & ' ( ) * + , ; = — subdelimitadores, especialmente para las claves y los valores de la query

La frontera entre encodeURI y encodeURIComponent

encodeURI conserva esos caracteres reservados, de modo que no rompe la estructura de una URL ya completa. encodeURIComponent los codifica todos, que es lo que quieres al insertar un fragmento como el valor de un solo parámetro.

Usa encodeURIComponent para un único valor y encodeURI para una dirección completa: recordar solo esa regla evita la mayoría de los errores.