Codificar e decodificar URL

Como usar

A ferramenta tem duas abas.

• Codificar / decodificar: escolha a operação e o tipo (Componente ou URL completa) e digite ou cole o texto. O resultado aparece enquanto você digita, junto com a saída das duas funções lado a lado para comparar. Inverter usa o resultado como nova entrada. Se a decodificação encontrar uma sequência inválida, a ferramenta mostra o trecho e a coluna exatos e entrega um resultado parcial.
• Analisar URL: cole um endereço completo para ver protocolo, host, caminho, fragmento e cada parâmetro da query numa tabela editável. Mude um valor, apague ou adicione parâmetros e copie a URL reconstruída. Parâmetros que você não tocou continuam exatamente como estavam.

O que é codificação de URL

Uma URL só pode ter um conjunto limitado de caracteres. Espaços, acentos, emoji e símbolos com significado especial (como &, ? e #) precisam ser escritos como sequências percentuais: um % seguido de dois dígitos hexadecimais para cada byte do caractere em UTF-8. Assim, o espaço vira %20, o é vira %C3%A9 (dois bytes) e o 😀 vira %F0%9F%98%80 (quatro bytes). Decodificar é o caminho inverso.

encodeURIComponent ou encodeURI?

As duas funções do JavaScript codificam espaços, acentos e emoji. A diferença está nos separadores de URL: ; , / ? : @ & = + $ #.

• encodeURIComponent codifica também os separadores. Use para um pedaço da URL: o valor de um parâmetro, um termo de busca, um segmento do caminho. Exemplo: o termo pão & café vira p%C3%A3o%20%26%20caf%C3%A9, e o & não é confundido com o início de outro parâmetro.
• encodeURI mantém os separadores. Use numa URL inteira que só tem espaços ou acentos: em https://site.com/café?q=a b, ela troca só o é (por %C3%A9) e o espaço (por %20) e deixa :, / e ? como estão, com a estrutura intacta.

Na dúvida, monte a URL por partes e aplique encodeURIComponent em cada valor. É o jeito mais seguro.

%20 ou +?

Os dois podem representar espaço, mas em lugares diferentes. Formulários HTML enviam os dados no formato application/x-www-form-urlencoded, em que o espaço vira + e o + de verdade vira %2B. Por isso, na query string, ?q=a+b costuma ser lido como "a b". No caminho da URL, porém, + é só um sinal de mais. A opção Espaço como + aplica a regra dos formulários nas duas direções.

Anatomia de uma URL

Um endereço de loja como https://loja.com:8080 + /busca/cafe + ?q=latte&pagina=2 + #resultados (tudo junto, sem espaços) se divide assim:

• Protocolo: https:
• Host: loja.com, com a porta 8080 (opcional)
• Caminho: /busca/cafe
• Query: q=latte&pagina=2, pares chave=valor separados por &
• Fragmento: #resultados, que aponta para um trecho da página e não é enviado ao servidor

Sem o protocolo (loja.com/busca), o analisador assume https:// e avisa.

Erros comuns

• Dupla codificação: codificar um texto que já estava codificado transforma %20 em %2520. Se o texto já tem sequências %XX, a ferramenta avisa.
• encodeURIComponent na URL inteira: o resultado (https%3A%2F%2F…) deixa de funcionar como link. Codifique só os valores.
• encodeURI num valor de parâmetro: um & ou = dentro do valor passa intacto e quebra a query.
• Domínios com acento: o navegador converte café.com para xn--caf-dma.com (Punycode). O analisador mostra as duas formas.
• + em valores: um telefone como +55 11… enviado sem codificar pode chegar como espaço. Codifique o + como %2B.
• Sequências quebradas: um % solto (como em "100% grátis") ou bytes UTF-8 incompletos fazem o decodeURIComponent falhar. Aqui você vê exatamente onde está o problema.

Privacidade

Tudo acontece no seu navegador. Nada do que você digita é enviado a um servidor ou fica salvo, e a ferramenta continua funcionando offline depois de carregada. Mesmo assim, evite compartilhar URLs que tragam senhas ou tokens.