Codificar / decodificar entidades HTML
Escape texto para HTML e transforme entidades de volta em texto.
Sobre esta ferramenta
Escape <, >, &, aspas e, opcionalmente, todos os caracteres não ASCII para que o texto possa ser colocado com segurança em HTML, ou decodifique entidades nomeadas e numéricas como &, é e 🚀 de volta para texto simples.
Como usar
- Escolha Codificar para escapar texto para HTML, ou Decodificar para transformar entidades de volta em caracteres.
- Cole o seu texto.
- Opcionalmente, codifique todos os caracteres não ASCII como entidades numéricas.
- Copie o resultado.
Perguntas
- Quais caracteres precisam ser escapados em HTML?
- & e < sempre; > por segurança; e " ou ' dentro de valores de atributos. Escapar esses cinco basta para exibir texto do usuário com segurança em HTML.
- O escape protege contra XSS?
- Escapar a saída para o contexto certo é a principal defesa para texto e atributos HTML. Não basta dentro de tags script, atributos de manipuladores de eventos ou URLs, que precisam da sua própria codificação.
- Preciso codificar letras acentuadas?
- Não, se a sua página é servida em UTF-8, como quase toda página moderna. Codificar todos os não ASCII só é útil para sistemas que não lidam com UTF-8.
- Qual é a diferença entre e um espaço normal?
- é um espaço não separável, U+00A0. O navegador não quebra a linha nele e não junta vários deles em um só, ao contrário dos espaços normais. Use-o para manter valores como “10 km” juntos. Para layout e espaçamento, use CSS em vez de sequências de .
- Devo usar ' ou ' para o apóstrofo?
- Os dois funcionam em HTML5 e XML, mas ' não fazia parte do HTML 4, então parsers mais antigos e alguns clientes de e-mail não o reconhecem. ' funciona em qualquer lugar, e é por isso que este codificador o usa. Dentro de um atributo entre aspas duplas, você nem precisa escapar o apóstrofo.
- Qual é a diferença entre HTML escaping e URL encoding?
- O HTML escaping deixa o texto seguro dentro do HTML; o URL encoding deixa o texto seguro dentro de uma URL. Um link em um atributo href precisa dos dois: primeiro aplique percent-encoding em cada valor da query e depois escape a URL inteira para HTML, para que cada & entre os parâmetros vire &. A ferramenta de URL cuida da etapa de percent-encoding.
O que são entidades HTML?
Uma entidade HTML é um pequeno trecho de texto que representa um caractere. Ela começa com & e termina com ponto e vírgula. As entidades nomeadas usam uma palavra, como & para & ou © para ©. As entidades numéricas usam o code point Unicode, em decimal como © ou em hex como ©. O navegador as substitui pelo caractere real ao renderizar a página, então o markup em si pode continuar em ASCII simples.
As entidades resolvem dois problemas. Primeiro, permitem mostrar caracteres que o HTML leria como markup: um < literal abre uma tag e um & solto inicia uma entidade. Segundo, permitem escrever caracteres que seu teclado ou a codificação do arquivo não suportam. O HTML5 define mais de 2.000 entidades nomeadas, e qualquer caractere Unicode, incluindo emoji como 🚀 para 🚀, pode ser escrito como entidade numérica.
Como escapar HTML em JavaScript
No navegador, o jeito mais seguro de mostrar texto do usuário é nem montar strings HTML. Defina element.textContent em vez de innerHTML, e o navegador trata o valor como texto. React, Vue, Svelte e Angular também escapam valores interpolados por padrão. O risco volta no momento em que você usa innerHTML, dangerouslySetInnerHTML ou v-html com dados que não controla, que é onde começa a maioria dos bugs de XSS em apps modernos.
Quando você precisa mesmo de uma string escapada, para um template ou o corpo de um e-mail, substitua os cinco caracteres especiais: primeiro o e comercial, depois <, >, as aspas duplas e as aspas simples. Escapar o & primeiro é importante, senão < vira &lt;. É isso que esta ferramenta de HTML escape faz no modo Codificar, escrevendo as aspas simples como '. Use Decodificar para conferir o que uma string vinda de um banco de dados ou de uma API realmente contém.
Por que aparece &amp; na minha página? Como corrigir o escape duplo
Se uma página mostra & ou " como texto literal, a string foi escapada duas vezes. Normalmente o valor foi escapado antes de ser armazenado, e o template o escapou de novo na saída. A primeira passada transforma & em &, a segunda transforma isso em &amp;, e o navegador exibe &. O mesmo acontece com feeds RSS, campos de CMS e APIs JSON que escapam HTML por você.
A correção é escapar uma única vez, no momento em que você escreve no HTML, e armazenar o texto bruto em todos os outros lugares. Para limpar dados existentes, cole-os no modo Decodificar: cada passada remove uma camada, então rode de novo se ainda sobrarem entidades. A decodificação usa o parser do navegador em um elemento textarea, que lê as entidades sem executar tags nem scripts. Para comparar as versões de antes e depois, use o Diff de texto.
Entidades HTML comuns
Caracteres que precisam de escape em HTML e os tipográficos mais procurados.
| Caractere | Entidade nomeada | Entidade numérica |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| espaço não separável | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
Algo não está funcionando ou um resultado parece errado? Relatar um problema com esta ferramenta