Codificador e Decodificador de URL com Analisador Integrado

O que é Codificação de URL (Codificação Percentual)?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Recursos Principais

Exemplos

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Como Usar

1. 1

   Insira uma URL ou String Codificada

   Cole uma URL na área decodificada para codificá-la, ou cole uma string codificada em percentual na área codificada para decodificá-la. Selecione o modo encodeURI ou encodeURIComponent dependendo do seu caso de uso.

2. 2

   Veja Resultados e Estrutura Analisada

   A outra área é atualizada instantaneamente conforme você digita. O analisador de URL decompõe a URL em protocolo, host, porta, caminho, parâmetros de consulta e fragmento — todos editáveis.

3. 3

   Copie ou Reconstrua

   Clique em Copiar para copiar o resultado codificado ou decodificado. Edite componentes individuais da URL e clique em Reconstruir para construir uma nova URL a partir das partes modificadas.

Erros Comuns

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Casos de Uso Comuns

Depurar URLs Ilegíveis

Decodifique URLs codificadas em percentual de logs de servidor, mensagens de erro ou ferramentas de desenvolvedor do navegador para ler o texto original legível.

Desenvolvimento de API

Codifique valores de parâmetros de consulta para chamadas de API REST, garantindo que caracteres especiais como &, = e espaços não quebrem a URL da requisição.

Configuração de Fluxo OAuth

Codifique corretamente redirect_uri e outros parâmetros de URL em URLs de autorização OAuth para evitar falhas de autenticação.

URLs Internacionalizadas

Codifique e decodifique URLs contendo chinês, japonês, coreano, árabe ou outros caracteres não-ASCII para aplicações web internacionalizadas.

Análise de Links de Marketing

Decodifique URLs de rastreamento de campanhas de e-mail e plataformas de publicidade para entender os parâmetros UTM incorporados e cadeias de redirecionamento.

Inspeção de Estrutura de URL

Analise URLs complexas em seus componentes — protocolo, host, porta, caminho, parâmetros de consulta e fragmento — para análise e modificação.

Detalhes Técnicos

Caracteres Reservados e Não Reservados do RFC 3986

O RFC 3986 define caracteres não reservados (A-Z, a-z, 0-9, -, ., _, ~) que nunca precisam de codificação, e caracteres reservados (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) que servem como delimitadores de URI e devem ser codificados em percentual quando usados como dados.

Fluxo de Codificação de Bytes UTF-8

Caracteres não-ASCII são primeiro convertidos para seu ponto de código Unicode, depois codificados como bytes UTF-8 (1-4 bytes dependendo do intervalo do ponto de código), e finalmente cada byte é codificado em percentual como %XX. Por exemplo: é (U+00E9) → bytes UTF-8 C3 A9 → %C3%A9. O emoji 🎉 (U+1F389) → bytes UTF-8 F0 9F 8E 89 → %F0%9F%8E%89.

Terminologia URL vs URI

Um URI (Identificador Uniforme de Recurso) é o termo geral para qualquer string identificadora. Uma URL (Localizador Uniforme de Recurso) é um URI que também especifica o mecanismo de acesso (como https://). As regras de codificação no RFC 3986 se aplicam a todos os URIs. A API do JavaScript usa a terminologia URI (encodeURI, decodeURI), enquanto o uso cotidiano favorece URL.

Melhores Práticas

Use o Modo Certo para o Trabalho

Use encodeURIComponent() para chaves e valores individuais de parâmetros de consulta. Use encodeURI() apenas quando tiver uma URL completa e quiser codificar caracteres inseguros sem quebrar sua estrutura. Nunca use encodeURI() em valores de parâmetros que possam conter &, = ou outros caracteres reservados.

Evite Codificação Dupla

Antes de codificar uma string, verifique se ela já está codificada. Procure sequências % existentes. Codificar uma string já codificada transforma %20 em %2520, %3D em %253D, e assim por diante. Se não tiver certeza, decodifique primeiro, depois codifique uma vez.

Decodifique no Lado do Servidor

A maioria dos frameworks web decodifica automaticamente parâmetros de URL antes que o código da sua aplicação os veja. Evite decodificar manualmente parâmetros que seu framework já decodificou — isso pode causar problemas se o valor original contiver sequências percentuais literais.

Codifique Valores para OAuth e Assinatura de API

Strings base de assinatura OAuth 1.0 e muitos algoritmos de assinatura de API requerem codificação percentual estrita conforme RFC 3986. Use encodeURIComponent() e depois substitua quaisquer caracteres restantes que não são codificados (como !, ', (, ), *) por seus equivalentes codificados em percentual se a especificação exigir.

Perguntas Frequentes