Ferramenta encodeURIComponent
Um espaço vira %20, & vira %26 e = vira %3D, então hello world & café fica hello%20world%20%26%20caf%C3%A9 e cabe dentro de um único valor de consulta. Cada valor recebe as regras de encodeURIComponent; a decodificação as desfaz. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Texto
- hello world & café
- Produção
- hello%20world%20%26%20caf%C3%A9
- Modo de cálculo
- Encode
- Entrada
- hello world & café
- Comprimento
- 31
Ao montar uma query string, um único e-comercial ou espaço sem escape pode dividir um parâmetro e quebrar uma integração. Esta ferramenta encodeURIComponent aplica exatamente as mesmas regras do encodeURIComponent e do decodeURIComponent do JavaScript: os caracteres reservados viram sequências percent-encoded na saída, e as sequências %XX válidas voltam a ser texto legível na entrada.
O que o encodeURIComponent realmente protege
Uma URL completa não é um bloco opaco único. Esquemas, separadores de caminho, delimitadores de query e marcadores de fragmento têm significado estrutural. O encodeURIComponent é a função que você usa quando o valor precisa viajar como dado dentro dessa estrutura sem reescrever a própria estrutura.
Espaços viram %20, e-comerciais viram %26, sinais de igual viram %3D, e texto não-ASCII, como letras acentuadas ou emojis, é expandido em sequências percent UTF-8 para que proxies e servidores não interpretem errado os limites dos bytes. Isso é diferente do encodeURI, que deixa muitos caracteres reservados intactos porque assume que você está codificando um endereço inteiro. Se você codificar um link https:// completo com as regras de componente, os dois-pontos e as barras viram sequências % e o link deixa de funcionar.
Se você deixar um termo de busca em texto livre sem codificar e colá-lo depois de ?, um & embutido parece um parâmetro novo. Esta ferramenta sempre usa a semântica de componente, de modo que cada valor fica seguro para ser colocado após uma chave, entre segmentos de caminho quando o segmento é dado, ou dentro do corpo de um formulário que depois vira uma query.
Como usar e ler o resultado
Envie um campo text com a string que lhe interessa e um campo opcional mode definido como encode ou decode. Encode é o padrão: o motor roda encodeURIComponent na entrada e retorna mode, a entrada original, a saída transformada e o comprimento da saída, para que os pipelines possam verificar limites de tamanho sem uma segunda passagem. Decode roda decodeURIComponent e retorna o mesmo formato com a string recuperada em output.
Strings vazias são válidas e fazem round-trip para strings vazias. Um text ausente também falha na validação antes de qualquer transformação.
Onde a codificação de componente se encaixa em fluxos reais
Interfaces de busca e filtro montam links compartilháveis a partir de frases digitadas que incluem espaços, aspas e escritas não latinas; codificar cada campo antes da montagem mantém o link estável em clientes de e-mail e apps de chat que reescrevem URLs cruas. Ferramentas de log e suporte costumam exibir linhas de requisição cruas com sequências percent; decodificar esses valores recupera os termos de busca ou os nomes de arquivo originais para investigação, sem colar num console descartável.
Migrações de dados revertem colunas com dupla codificação quando exportadores antigos codificavam duas vezes, ou aplicam uma única codificação de componente consistente ao guardar valores que depois serão inseridos em redirecionamentos. Checklists de ensino e revisão de código usam uma referência confiável de encodeURIComponent para que desenvolvedores juniores comparem os helpers de cada linguagem com a base do JavaScript e identifiquem bibliotecas que tratam sinais de mais ou tis de forma diferente.
Casos de uso
Valores seguros de parâmetro de query
Codifique e-mails, nomes e filtros em texto livre antes de anexá-los a pares ?chave=valor, para que caracteres reservados nunca dividam a query string.
Decodificar logs de requisição e exports
Transforme fragmentos de caminho ou query percent-encoded de logs de acesso e exports CSV de volta em UTF-8 legível para suporte e análise.
Verificação de paridade entre pilhas
Compare o codificador de URL de outra linguagem com a saída do encodeURIComponent do JavaScript para que microsserviços mistos concordem nas regras de escape.
Perguntas frequentes
Qual é a diferença entre encodeURIComponent e encodeURI?
O encodeURIComponent aplica escape a caracteres reservados como &, =, ? e / para que um valor seja seguro como dado. O encodeURI deixa esses caracteres estruturais intactos para URLs inteiras. Esta ferramenta sempre usa a semântica de componente.
O que acontece se a entrada de decode estiver malformada?
Corrija a string ou trate-a como dado opaco em vez de decodificar.
A ferramenta encodeURIComponent é grátis?
A ferramenta do navegador é grátis e roda localmente.
Ela lida com Unicode e emoji?
Sim. A codificação usa sequências percent UTF-8 que coincidem com o encodeURIComponent do JavaScript, então texto acentuado e emoji fazem round-trip corretamente ao decodificar.
Devo codificar a consulta inteira ou cada valor?
Codifique cada valor separadamente e depois junte tudo com & e = comuns. Se você codificar uma consulta já montada, os separadores também são escapados e o servidor que a recebe não sabe mais onde termina um valor e começa o próximo.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/enc/url-component \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"hello world & café"}'const res = await fetch("https://api.kit.forhosting.com/enc/url-component", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "hello world & café"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/enc/url-component",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "hello world & café"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/enc/url-component", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"hello world & café"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"hello world & café"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/enc/url-component", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"text": "hello world & café"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "enc.url_component",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Use-a para preparar valores antes que entrem em uma URL, para reverter a codificação de logs ou payloads de terceiros e para obter um resultado determinístico, tanto se você rodar de graça no navegador quanto se chamar a API do KIT.
Como chamar o endpoint e ler o resultado
Números e booleanos são convertidos em texto do mesmo jeito que o JavaScript os transforma em string antes de codificar, o que ajuda em testes rápidos de API. Sequências percent malformadas no decode, como um sinal de porcentagem solto ou um final %X incompleto, geram invalid_input com uma mensagem que nomeia a falha de decodificação; essas tarefas não são cobradas. Como o caminho é puro parse, sem rede, modelo, relógio ou fonte aleatória, o mesmo par de text e mode sempre produz o mesmo objeto JSON na ferramenta grátis do navegador e na API paga. A US$ 0,002 por requisição bem-sucedida, o preço acompanha uma transformação minúscula na borda, então você pode codificar milhares de valores de query em uma limpeza sem negociar faixas. Prefira codificar cada valor e depois juntar com os caracteres literais & e =, em vez de codificar uma query já montada, para que os delimitadores permaneçam estruturais e só os caracteres de payload recebam escape.
Onde a codificação de componente se encaixa em fluxos reais
Webhooks de saída são o caso clássico: o e-mail de um cliente, o assunto de um ticket ou uma tag em texto livre precisam caber em uma URL de callback sem quebrar o parser do destinatário.
Perguntas técnicas
Posso codificar e decodificar no mesmo endpoint?
Sim. Defina mode como encode (padrão) ou decode. A resposta sempre inclui mode, input, output e length.