Codificador de Entidades HTML — Escapar HTML

O Que É a Codificação de Entidades HTML?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Principais Recursos

Exemplos Práticos

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

Como Usar o Codificador de Entidades HTML

1. 1

   Cole seu HTML ou texto

   Coloque a marcação ou o texto puro que você quer escapar na caixa de entrada. A saída codificada atualiza ao vivo conforme você digita — não há botão de envio e nada é mandado a lugar nenhum.

2. 2

   Escolha o formato de entidade

   Nomeado é o padrão legível (<, &, ©). Mude para Decimal (<) ou Hex (<) quando um sistema consumidor preferir referências numéricas ou você não puder garantir que entidades nomeadas sejam suportadas.

3. 3

   Opcionalmente, codifique tudo não-ASCII

   Deixe isto desligado para páginas UTF-8 modernas, para que acentos e emojis permaneçam como caracteres brutos legíveis. Marque apenas quando o texto precisar sobreviver a um charset legado de byte único, o que converte todo caractere acima de 0x7F numa entidade segura para ASCII.

4. 4

   Copie o resultado codificado

   Clique em Copiar para colocar a string escapada na sua área de transferência, pronta para colar num modelo, numa página de documentação ou num campo de banco de dados. Limpar reinicia ambos os painéis para o próximo trecho.

5. 5

   Precisa do inverso? Inverta a direção

   Use Inverter direção para mudar para o Decodificador de Entidades HTML quando quiser transformar entidades de volta nos caracteres que elas representam.

Erros Comuns de Codificação HTML

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Quem Usa Esta Ferramenta

Exibir Amostras de Código numa Página Web

Escrevendo um tutorial ou documentação que precisa mostrar HTML literal? Escape o trecho para que <strong>bold</strong> apareça como texto em vez de renderizar. Cole a marcação, copie a saída escapada e coloque-a dentro de um bloco <pre> ou <code>.

Higienizar Entrada de Usuário Contra XSS

Antes de inserir qualquer string fornecida pelo usuário no seu HTML, escape os cinco caracteres reservados para que um payload como <script>…</script> vire texto inerte. Esta é a defesa fundamental contra cross-site scripting quando você constrói marcação à mão.

Armazenar Marcação num Campo de Banco de Dados ou JSON

Precisa salvar um fragmento de HTML como string pura sem que seja interpretado adiante? Codifique-o primeiro para que os sinais de menor/maior e os E comerciais sobrevivam ao armazenamento e à reexibição intactos, depois decodifique na volta.

Criar Modelos de E-mail e Conteúdo de CMS

Clientes de e-mail e sistemas de gerenciamento de conteúdo são implacáveis com caracteres especiais brutos. Escape o conjunto reservado — e opcionalmente tudo não-ASCII — para que seu modelo renderize de forma consistente entre clientes que talvez não compartilhem seu charset.

Converter Texto para um Charset Legado

Mirando um sistema que não lida com UTF-8 bruto? Ative "Codificar tudo não-ASCII" para reescrever toda letra acentuada, símbolo e emoji como uma entidade segura para ASCII, garantindo que o texto sobreviva ao transporte por pipelines limpas de 7 bits.

Escapar Valores de Atributo XML e SVG

XML e SVG inline compartilham os caracteres reservados do HTML. Codifique aspas e sinais de menor/maior para que uma string com marcação embutida se encaixe com segurança num valor de atributo sem quebrar a estrutura do documento.

Consultar uma Entidade Rapidamente

Esqueceu se o sinal de marca registrada é ™ ou ™? Digite o caractere, leia sua entidade nomeada, decimal e hex na saída, ou consulte a tabela de referência rápida integrada sem sair da página.

Como o Codificador Funciona

Modo de Caracteres Especiais (Padrão)

Por padrão, apenas os cinco caracteres reservados do HTML são escapados — & < > " ' — seguindo as regras de serialização HTML da WHATWG para uma saída segura. & é substituído primeiro para que as entidades produzidas para os outros caracteres não sejam duplamente escapadas. Todos os demais caracteres, incluindo não-ASCII, passam inalterados.

O Apóstrofo Usa '

Em vez do nomeado ' — que é indefinido no HTML4 e inseguro em alguns analisadores legados — a aspa simples é emitida como o numérico ' (decimal '), referenciando U+0027. Isso corresponde à convenção de bibliotecas bem testadas como a he e garante que a saída seja segura igualmente em HTML4, HTML5 e XML.

Codificação Nomeada, Decimal e Hex

O seletor de formato controla como cada caractere escapado é escrito: Nomeado usa rótulos definidos onde existem (<, ©), Decimal escreve o ponto de código Unicode na base 10 (<) e Hex o escreve na base 16 (<). As formas numéricas referenciam os mesmos pontos de código que as nomeadas e são intercambiáveis quando analisadas.

Opção de Codificar Tudo Não-ASCII

Quando ativada, todo caractere com ponto de código acima de 0x7F é convertido numa entidade no formato escolhido — café vira café (nomeado), café (decimal) ou café (hex). Caracteres astrais como emojis são codificados com seu ponto de código completo (😀 → 😀). Isso produz uma saída ASCII limpa de 7 bits para transporte legado.

Charset Versus Entidades

Um conjunto de caracteres define como o texto é armazenado como bytes; uma entidade é uma forma de soletrar um caractere usando apenas ASCII. Numa página UTF-8, caracteres não-ASCII não precisam de entidade, e é por isso que o padrão os deixa brutos. Codificar tudo só é necessário quando a saída precisa atravessar um charset não-Unicode ou um sistema hostil ao UTF-8.

Local no Navegador, Rede Zero

A codificação roda de forma síncrona em JavaScript na thread principal; não há chamada de API, nem ida e volta a um servidor via worker, nem persistência. A entrada nunca sai da página, o que você pode confirmar observando um painel Network vazio enquanto digita.

Boas Práticas de Escape de HTML

Escape na Saída, no Contexto Certo

Codifique os dados no momento em que você os insere no HTML, não quando os recebe, e adeque a codificação ao contexto. A codificação de entidades HTML é para conteúdo de elemento e atributo HTML; use codificação de URL dentro de URLs e escape de JavaScript/JSON dentro de blocos de script. Escapar no contexto errado deixa uma brecha.

Sempre Escape Entrada Não Confiável

Qualquer string que se origine de um usuário, de um upload ou de uma API externa deve ser escapada antes de aterrissar na sua marcação. Esta é a defesa central contra XSS: um payload como <script>alert(1)</script> vira texto inerte assim que os sinais de menor/maior viram entidades.

Prefira o Escape Integrado Onde Existir

React, Vue e a maioria dos motores de template no servidor escapam texto interpolado automaticamente; definir element.textContent também escapa por você. Use esta ferramenta para conversões pontuais e para entender a saída — mas no código da aplicação, apoie-se no auto-escape do framework em vez de fazê-lo à mão.

Deixe Não-ASCII Bruto em Páginas UTF-8

Se sua página declara <meta charset="utf-8">, não codifique acentos e emojis em entidades — o UTF-8 bruto é mais curto, mais legível e igualmente correto. Reserve "Codificar tudo não-ASCII" para os casos genuínos de charset legado que realmente exigem isso.

Use o Apóstrofo Numérico em Contextos Mistos

Quando a saída puder ser consumida por analisadores antigos, processadores XML ou clientes de e-mail, prefira o numérico ' ao nomeado ' para a aspa simples. A forma numérica é compreendida universalmente; a nomeada não, e um "'" literal perdido no texto renderizado é um bug comum e evitável.

Perguntas Frequentes