Um URL só consegue transportar diretamente um conjunto limitado de caracteres — letras, números e alguns símbolos não reservados. Os espaços, as letras acentuadas (como é, ü, ã), os emoji e os caracteres & ? # % + = — os caracteres reservados que estruturam um URL — têm de ser convertidos primeiro para o formato %XX, um processo chamado codificação percentual ou, mais comummente, codificação URL. A operação inversa é a descodificação URL. A ferramenta acima trata de ambos os sentidos, além da análise/construção de query string, a análise de URL completo e Base64, instantaneamente no teu navegador.
Qual é a diferença entre encodeURIComponent e encodeURI?
& = ? / : #, o que o torna a opção adequada para valores de parâmetro. encodeURI() serve para codificar um endereço INTEIRO; deixa intactos os caracteres que um URL precisa para funcionar — : / ? # & =.- encodeURIComponent("a&b=c") →
a%26b%3Dc(& e = também são codificados — correto para um único VALOR de parâmetro) - encodeURI("https://x.com/a b?c=1&d=2") →
https://x.com/a%20b?c=1&d=2(só o espaço é codificado; a estrutura do URL é preservada)
Como se codificam os caracteres acentuados e os emoji num URL?
%XX. Por exemplo, é ocupa 2 bytes e converte-se em %C3%A9; um emoji de 4 bytes converte-se em quatro grupos %XX distintos. Nunca precisas de calcular isto à mão — encodeURIComponent() faz isso automaticamente.| Carácter | Significado | Forma codificada |
|---|---|---|
| (espaço) | Carácter espaço | %20 (ou + em formulários) |
| é | Letra acentuada, ex. café | %C3%A9 |
| ã | Letra acentuada, ex. amanhã | %C3%A3 |
| & | Separador de parâmetros | %26 |
| = | Separador chave-valor | %3D |
| ? | Início da query string | %3F |
| # | Início do fragmento/âncora | %23 |
| % | O próprio sinal de percentagem | %25 |
| 🚀 | Emoji (UTF-8 de 4 bytes) | %F0%9F%9A%80 |
Como se constrói e analisa uma query string?
chave=valor que seguem o ? num URL, separados por &. O separador «Construir Query» acima permite introduzir pares chave-valor e gera uma query string corretamente codificada em percentagem; o separador «Analisar Query» pega num URL existente e converte cada parâmetro numa tabela legível. A ferramenta também assinala automaticamente os parâmetros de tracking conhecidos como utm_source, gclid e fbclid.Em que se diferencia a codificação Base64 da codificação URL?
+ e /, às vezes precisa de um passo adicional por encodeURIComponent() antes de poder entrar num parâmetro de URL — experimenta-o na secção de mini-ferramentas abaixo.