📥 URL/Texto Original0 caracteres
📤 URL Codificada

💡 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"