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 &amp;, &eacute; e &#x1F680; de volta para texto simples.

Como usar

  1. Escolha Codificar para escapar texto para HTML, ou Decodificar para transformar entidades de volta em caracteres.
  2. Cole o seu texto.
  3. Opcionalmente, codifique todos os caracteres não ASCII como entidades numéricas.
  4. 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 &nbsp; e um espaço normal?
&nbsp; é 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 &nbsp;.
Devo usar &apos; ou &#39; para o apóstrofo?
Os dois funcionam em HTML5 e XML, mas &apos; não fazia parte do HTML 4, então parsers mais antigos e alguns clientes de e-mail não o reconhecem. &#39; 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 &amp;. 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 &amp; para & ou &copy; para ©. As entidades numéricas usam o code point Unicode, em decimal como &#169; ou em hex como &#xA9;. 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 &#x1F680; 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 &lt; vira &amp;lt;. É isso que esta ferramenta de HTML escape faz no modo Codificar, escrevendo as aspas simples como &#39;. 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;amp; na minha página? Como corrigir o escape duplo

Se uma página mostra &amp; ou &quot; 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 &amp;, a segunda transforma isso em &amp;amp;, e o navegador exibe &amp;. 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.

CaractereEntidade nomeadaEntidade numérica
&&amp;&#38;
<&lt;&#60;
>&gt;&#62;
"&quot;&#34;
'&apos;&#39;
espaço não separável&nbsp;&#160;
©&copy;&#169;
®&reg;&#174;
™&trade;&#8482;
€&euro;&#8364;
£&pound;&#163;
°&deg;&#176;
×&times;&#215;
÷&divide;&#247;
–&ndash;&#8211;
—&mdash;&#8212;
…&hellip;&#8230;
«&laquo;&#171;
»&raquo;&#187;
→&rarr;&#8594;
←&larr;&#8592;
✓&check;&#10003;

Algo não está funcionando ou um resultado parece errado? Relatar um problema com esta ferramenta