Descrição Overview Descripción
A URL foi inventada por Tim Berners-Lee em 1991, junto com o HTML e o HTTP, como parte do projeto que se tornaria a World Wide Web. O formato que vemos hoje — aquele `https://exemplo.com/pagina?parametro=valor&outro=123` — foi formalizado no RFC 1738 em 1994 e refinado até o RFC 3986 em 2005. Existe um problema intrínseco no design original: a URL precisa ser transmitida como texto ASCII puro, mas o mundo fala centenas de idiomas com acentos, caracteres especiais e scripts completamente diferentes do alfabeto latino. A solução foi o percent-encoding: qualquer byte que não seja um caractere ASCII seguro é representado como `%` seguido de dois dígitos hexadecimais. A letra `ã` em UTF-8, por exemplo, ocupa dois bytes — 0xC3 e 0xA3 — e vira `%C3%A3`.
A parte que quase todo desenvolvedor aprende da forma difícil é a diferença entre `encodeURIComponent` e `encodeURI`. A função `encodeURI` preserva os caracteres estruturalmente significativos numa URL — `/`, `?`, `#`, `&`, `=` — porque foi feita para codificar uma URL completa. Já `encodeURIComponent` codifica tudo isso também, porque foi feita para codificar um valor dentro da URL, onde `/`, `?` e `&` não podem aparecer sem codificação. Quando você monta uma query string manualmente com concatenação de string, qualquer valor contendo `&`, `=`, `+` ou `#` vai silenciosamente quebrar o parsing no servidor. Isso acontece muito mais do que deveria, especialmente com nomes que contêm apóstrofo, espaços ou — a campeã dos bugs de encoding — o `@` em endereços de e-mail passados como parâmetro.
Um cuidado importante ao trabalhar com encoding de URL é o double encoding — codificar algo que já está codificado. Se você recebe uma URL que já contém `%20` e passa por `encodeURIComponent`, o `%` vira `%25` e o resultado final é `%2520`, que o servidor interpreta como a string literal `%20` em vez de um espaço. Outro ponto que confunde é a diferença entre `%20` e `+` para representar espaços: formulários HTML usam `+` no formato `application/x-www-form-urlencoded`, mas o RFC 3986 especifica `%20`. A maioria dos servidores aceita os dois, mas em contextos como assinaturas de API — AWS, por exemplo — a diferença é crítica e pode gerar erros de autenticação notoriamente difíceis de depurar.
URLs were invented by Tim Berners-Lee in 1991 alongside HTML and HTTP as part of the project that would become the World Wide Web. The format we use today — that `https://example.com/page?param=value&other=123` structure — was formalized in RFC 1738 in 1994 and refined through RFC 3986 in 2005. There is an inherent tension in the original design: URLs must be transmitted as pure ASCII text, yet the world communicates in hundreds of languages with accents, special characters, and scripts entirely different from the Latin alphabet. The solution was percent-encoding: any byte that is not a safe ASCII character is represented as `%` followed by two hexadecimal digits. The letter `ã` in UTF-8, for instance, occupies two bytes — 0xC3 and 0xA3 — and becomes `%C3%A3`.
The part almost every developer learns the hard way is the difference between `encodeURIComponent` and `encodeURI`. The `encodeURI` function preserves structurally significant URL characters — `/`, `?`, `#`, `&`, `=` — because it was designed to encode a complete URL. `encodeURIComponent`, on the other hand, encodes those characters too, because it was designed to encode a value inside a URL, where `/`, `?`, and `&` cannot appear unescaped. When you manually build a query string by string concatenation, any value containing `&`, `=`, `+`, or `#` will silently corrupt server-side parsing. This happens far more often than it should, especially with names containing apostrophes, spaces, or the undisputed champion of encoding bugs — the `@` in email addresses passed as query parameters.
A critical pitfall when working with URL encoding is double encoding — encoding something that is already encoded. If you receive a URL that already contains `%20` and feed it through `encodeURIComponent`, the `%` becomes `%25` and the result is `%2520`, which the server will interpret as the literal string `%20` rather than a space. Another common source of confusion is the difference between `%20` and `+` for spaces: HTML forms encode spaces as `+` in `application/x-www-form-urlencoded`, but RFC 3986 specifies `%20`. Most servers accept both, but in contexts like API request signing — AWS being the prime example — the distinction is critical and can produce authentication errors that are notoriously hard to diagnose.
Las URL fueron inventadas por Tim Berners-Lee en 1991, junto con HTML y HTTP, como parte del proyecto que se convertiría en la World Wide Web. El formato que usamos hoy — ese `https://ejemplo.com/pagina?parametro=valor&otro=123` — fue formalizado en el RFC 1738 en 1994 y refinado hasta el RFC 3986 en 2005. Existe una tensión intrínseca en el diseño original: las URL deben transmitirse como texto ASCII puro, pero el mundo se comunica en cientos de idiomas con acentos, caracteres especiales y alfabetos completamente distintos al latino. La solución fue el percent-encoding: cualquier byte que no sea un carácter ASCII seguro se representa como `%` seguido de dos dígitos hexadecimales. La letra `ã` en UTF-8, por ejemplo, ocupa dos bytes — 0xC3 y 0xA3 — y se convierte en `%C3%A3`.
La parte que casi todo desarrollador aprende a la mala es la diferencia entre `encodeURIComponent` y `encodeURI`. La función `encodeURI` preserva los caracteres estructuralmente significativos de una URL — `/`, `?`, `#`, `&`, `=` — porque fue diseñada para codificar una URL completa. `encodeURIComponent`, en cambio, también codifica esos caracteres, porque fue diseñada para codificar un valor dentro de la URL, donde `/`, `?` y `&` no pueden aparecer sin escapar. Cuando construyes una query string manualmente concatenando texto, cualquier valor que contenga `&`, `=`, `+` o `#` romperá silenciosamente el parseo en el servidor. Esto ocurre con mucha más frecuencia de lo que debería, especialmente con nombres que contienen apóstrofes, espacios o — la campeona indiscutible de los bugs de encoding — la `@` en direcciones de correo pasadas como parámetro.
Un riesgo importante al trabajar con codificación de URL es el double encoding — codificar algo que ya está codificado. Si recibes una URL que ya contiene `%20` y la pasas por `encodeURIComponent`, el `%` se convierte en `%25` y el resultado final es `%2520`, que el servidor interpretará como la cadena literal `%20` en vez de un espacio. Otro punto que genera confusión es la diferencia entre `%20` y `+` para representar espacios: los formularios HTML usan `+` en el formato `application/x-www-form-urlencoded`, pero el RFC 3986 especifica `%20`. La mayoría de los servidores acepta ambos, pero en contextos como la firma de peticiones a APIs — AWS, por ejemplo — la diferencia es crítica y puede generar errores de autenticación notoriamente difíciles de depurar.
Detalhamento técnico
Pontos frequentes
- Para que serve esta ferramenta?: Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
- Meus dados são enviados a algum servidor?: O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
- Posso usar em produção ou para dados reais?: Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Trecho para testar
- Há também o bloco "Exemplo de Código" com o trecho completo; use esse texto rápido para colar nos campos e validar: Query — nome=João Silva → nome=Jo%C3%A3o%20Silva
Technical deep dive
Common questions summarized
- What is this tool for?: It runs fully in your browser: useful to validate, format, or convert data in everyday development.
- Are my inputs sent to a server?: Processing happens locally with JavaScript. We do not store what you paste into the text areas.
- Can I use this for real production data?: Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Sample payload to try
- See also the larger "Code Snippets" sample; paste this excerpt to try locally: Query — nome=João Silva → nome=Jo%C3%A3o%20Silva
Detalle técnico
Ideas claras antes de usar la herramienta
- ¿Para qué sirve esta herramienta?: Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
- ¿Se envían mis datos a algún servidor?: El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
- ¿Puedo usarlo con datos reales en producción?: Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.
Fragmento corto para probar
- Debajo aparece también el ejemplo largo en "Fragmentos de Código"; pega esta versión corta: Query — nome=João Silva → nome=Jo%C3%A3o%20Silva
Guia da ferramenta Tool guide Guía de la herramienta
-
O que é URL encoding (percent-encoding) Caracteres reservados ou não ASCII em URLs são escritos como
%seguido de dois dígitos hex (ex.: espaço como%20). Query strings e fragmentos precisam disso para não quebrar o parse. -
O que a ferramenta faz Aplica
encodeURIComponent/decodeURIComponentno texto. -
Por que usar Montar links com nomes acentuados, depurar redirects, testar integrações com parâmetros especiais.
-
What URL encoding (percent-encoding) is Reserved or non-ASCII characters in URLs are written as
%plus two hex digits (e.g. space as%20). Query strings need this so parsing does not break. -
What the tool does Applies
encodeURIComponent/decodeURIComponentto the text. -
Why use it Build links with accented names, debug redirects, test integrations with special parameters.
-
Qué es la codificación URL (percent-encoding) Los caracteres reservados o no ASCII en URLs se escriben como
%más dos dígitos hex (p. ej. espacio como%20). Las query strings lo necesitan para no romper el análisis. -
Qué hace la herramienta Aplica
encodeURIComponent/decodeURIComponental texto. -
Por qué usarla Construir enlaces con nombres acentuados, depurar redirecciones, probar integraciones con parámetros especiales.
Exemplo de Código Code Snippets Fragmentos de Código
nome=João Silva → nome=Jo%C3%A3o%20Silva
nome=João Silva → nome=Jo%C3%A3o%20Silva
nome=João Silva → nome=Jo%C3%A3o%20Silva
Query Query Query
nome=João Silva → nome=Jo%C3%A3o%20Silva
Perguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.