URL Encoder/Decoder
Codifique e decodifique URLs para uso seguro em links, APIs e parâmetros de query string.
💡 Quando usar cada tipo?
- Componente: Use para codificar valores de parâmetros (ex:
?nome=valor) - URI Completa: Use para codificar URLs mantendo caracteres especiais como
:,/,?
Exemplo: O espaço vira %20, acentos como ã viram %C3%A3
📚 O que é URL Encoding?
URL Encoding (também chamado de "Percent Encoding") é um mecanismo para codificar caracteres especiais em URLs. URLs só podem conter um conjunto limitado de caracteres ASCII, então caracteres como espaços, acentos e símbolos especiais precisam ser convertidos.
O formato usa %XX onde XX é o código hexadecimal do byte. Por exemplo, o espaço (código 32 em decimal, 20 em hex) vira %20.
🔧 encodeURI vs encodeURIComponent
encodeURIComponent (Componente) - ✅ Use na maioria dos casos
Codifica todos os caracteres especiais, incluindo : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use para valores de parâmetros de query string.
// Exemplo: passar uma URL como parâmetro
const url = "https://exemplo.com?q=olá";
const encoded = encodeURIComponent(url);
// Resultado: "https%3A%2F%2Fexemplo.com%3Fq%3Dol%C3%A1"encodeURI (URI Completa) - ⚠️ Use com cuidado
Não codifica caracteres permitidos em URLs como : / ? # [ ] @. Use apenas para corrigir uma URL completa que tem caracteres inválidos.
// Exemplo: URL com espaço no caminho
const url = "https://exemplo.com/pasta com espaço/arquivo.txt";
const encoded = encodeURI(url);
// Resultado: "https://exemplo.com/pasta%20com%20espa%C3%A7o/arquivo.txt"💼 Casos de Uso Comuns
- Query strings: Passar dados em URLs de pesquisa
?busca=ol%C3%A1%20mundo - APIs REST: Enviar dados especiais em URLs de requisições
- Links compartilhados: Garantir que URLs com caracteres especiais funcionem
- Formulários GET: Navegadores codificam dados automaticamente
- Redirecionamentos: Passar URL de destino como parâmetro
- OAuth: Scopes e callback URLs precisam de encoding
❓ Perguntas Frequentes
Por que espaço às vezes vira + e às vezes %20?
O + é usado no formato application/x-www-form-urlencoded (formulários HTML), enquanto %20 é o padrão RFC 3986 para URLs. Ambos representam espaço.
Posso usar emojis em URLs?
Sim! Emojis são codificados como múltiplos bytes UTF-8. Por exemplo, 🌍 vira %F0%9F%8C%8D. Navegadores modernos exibem emojis mesmo em URLs codificadas.
Meus dados são seguros?
Sim! Todo o processamento é feito localmente no seu navegador usando JavaScript nativo. Nenhum dado é enviado para servidores externos.
📝 Exemplos de Código
Veja como fazer URL encoding em diferentes linguagens de programação:
💛 JavaScript
// Codificar parâmetro (recomendado)
const param = "olá mundo!";
const encoded = encodeURIComponent(param);
console.log(encoded); // "ol%C3%A1%20mundo!"
// Decodificar
const decoded = decodeURIComponent(encoded);
console.log(decoded); // "olá mundo!"
// Construir URL com URLSearchParams (moderno)
const params = new URLSearchParams({ busca: "olá", pagina: "1" });
console.log(params.toString()); // "busca=ol%C3%A1&pagina=1"🐍 Python
from urllib.parse import quote, unquote, urlencode
texto = "olá mundo!"
# Codificar (equivalente a encodeURIComponent)
encoded = quote(texto, safe='')
print(encoded) # "ol%C3%A1%20mundo%21"
# Decodificar
decoded = unquote(encoded)
print(decoded) # "olá mundo!"
# Construir query string
params = urlencode({'busca': 'olá', 'pagina': 1})
print(params) # "busca=ol%C3%A1&pagina=1"🟣 C# (.NET)
using System.Web;
using System.Net;
string texto = "olá mundo!";
// HttpUtility (System.Web)
string encoded = HttpUtility.UrlEncode(texto);
string decoded = HttpUtility.UrlDecode(encoded);
// Uri.EscapeDataString (mais moderno)
string escaped = Uri.EscapeDataString(texto);
string unescaped = Uri.UnescapeDataString(escaped);
// WebUtility (para aplicações não-web)
string encoded2 = WebUtility.UrlEncode(texto);☕ Java
import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;
String texto = "olá mundo!";
// Codificar
String encoded = URLEncoder.encode(texto, StandardCharsets.UTF_8);
System.out.println(encoded); // "ol%C3%A1+mundo%21"
// Decodificar
String decoded = URLDecoder.decode(encoded, StandardCharsets.UTF_8);
System.out.println(decoded); // "olá mundo!"🐘 PHP
<?php
$texto = "olá mundo!";
// rawurlencode (RFC 3986, espaço = %20)
$encoded = rawurlencode($texto);
echo $encoded; // "ol%C3%A1%20mundo%21"
// urlencode (form, espaço = +)
$encoded2 = urlencode($texto);
echo $encoded2; // "ol%C3%A1+mundo%21"
// Decodificar
$decoded = rawurldecode($encoded);
$decoded2 = urldecode($encoded2);
// Construir query string
$params = http_build_query(['busca' => 'olá', 'pagina' => 1]);
?>⚠️ Erros Comuns em URL Encoding
Usar encodeURI() para query strings
// ❌ Errado - & não é codificado, quebra a query string
const valor = "a=1&b=2";
encodeURI(valor); // "a=1&b=2" (não muda!)
// ✅ Correto
encodeURIComponent(valor); // "a%3D1%26b%3D2"Codificar a URL inteira com encodeURIComponent()
// ❌ Errado - quebra a estrutura da URL
const url = "https://exemplo.com/busca?q=teste";
encodeURIComponent(url);
// "https%3A%2F%2Fexemplo.com..." (inválido!)
// ✅ Correto - codifique apenas os valores
const base = "https://exemplo.com/busca";
const param = encodeURIComponent("busca com espaços");
const urlFinal = base + "?q=" + param;Esquecer de codificar duas vezes em alguns casos
// Se um parâmetro contém uma URL, precisa dupla codificação:
const urlParam = "https://site.com?id=123";
const encoded = encodeURIComponent(urlParam);
// Agora 'encoded' pode ser usado como valor de parâmetro
// Quando receber, decodifique uma vez:
decodeURIComponent(encoded);Inconsistência entre + e %20 para espaços
// JavaScript encodeURIComponent usa %20
encodeURIComponent("a b"); // "a%20b"
// application/x-www-form-urlencoded usa +
// (padrão de formulários HTML)
// Se precisar compatibilidade com formulários:
encodeURIComponent("a b").replace(/%20/g, "+"); // "a+b"