encodeURIComponent vs encodeURI em JavaScript

Entenda a diferença entre encodeURI e encodeURIComponent e quando usar cada um.

Introdução

JavaScript tem duas funções nativas para encoding de URLs. Usar a errada pode quebrar suas URLs.

O Algoritmo

encodeURI preserva a estrutura da URL. encodeURIComponent codifica TUDO, incluindo /, ? e &.

Implementação em Javascript

url-encoder.jsjavascript

// encodeURIComponent - Para valores de parâmetros
const param = "nome=João & Silva";
const encoded = encodeURIComponent(param);
console.log(encoded); // nome%3DJo%C3%A3o%20%26%20Silva

// encodeURI - Para URLs completas (preserva :, /, ?, &)
const url = "https://site.com/busca?q=São Paulo&lang=pt";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);

// Decodificar
console.log(decodeURIComponent(encoded));
console.log(decodeURI(encodedUrl));

// URLSearchParams - API moderna para query strings
const params = new URLSearchParams({
    nome: "João Silva",
    cidade: "São Paulo"
});
console.log(params.toString()); // nome=Jo%C3%A3o+Silva&cidade=S%C3%A3o+Paulo

Regra de ouro: use `encodeURIComponent` para valores de parâmetros individuais e `encodeURI` para URLs completas. `URLSearchParams` é a API moderna preferida.

Não quer escrever código?

Use nossa ferramenta online gratuita para processar URL-ENCODER instantaneamente. Perfeito para testes rápidos.

Usar Ferramenta de URL-ENCODER Online