Caracteres Reservados de URL Explicados

A especificação de URL (RFC 3986) divide os caracteres em reservados e não reservados. Conhecer essa divisão deixa claro quando você precisa codificar e quando não precisa.

Caracteres não reservados (seguros como estão)

Letras, dígitos e os quatro símbolos - _ . ~ podem aparecer em qualquer lugar sem codificação. Codificá-los não mudaria o seu significado, portanto normalmente são deixados como estão.

Caracteres reservados (significado estrutural)

Caracteres reservados dividem uma URL em partes. Para usar um deles como dado literal, você precisa codificá-lo.

• : / ? # [ ] @ — separam as grandes seções (scheme, path, query, fragment, etc.)
• ! $ & ' ( ) * + , ; = — subdelimitadores, especialmente para chaves e valores de query

A fronteira entre encodeURI e encodeURIComponent

encodeURI preserva esses caracteres reservados, portanto não quebra a estrutura de uma URL já completa. encodeURIComponent codifica todos eles, que é o que você quer ao inserir um fragmento como o valor de um único parâmetro.

Use encodeURIComponent para um único valor e encodeURI para um endereço inteiro — lembrar apenas dessa regra evita a maioria dos erros.