Ferramenta de escape / desescape HTML

Escapar HTML substitui caracteres com significado especial em HTML por suas entidades correspondentes. Os principais são <, >, &, " e '. Sem escape, um < ou & solto pode quebrar o layout ou ser interpretado como marcação.

Desescapar HTML faz o processo inverso e converte entidades de volta para seus caracteres originais. < volta a ser < e & volta a ser &. Isso é útil ao ler conteúdo vindo de uma API, feed RSS ou exportação de CMS.

Às vezes você verá isso descrito como HTML escape / unescape como uma operação combinada. Seja chamando de codificação/decodificação de entidades ou simplesmente escape e desescape, esta ferramenta cobre os dois sentidos.

O escape HTML funciona caractere por caractere, e não byte por byte como codificações binárias. Cada caractere reservado é mapeado para uma entidade HTML específica, nomeada como & ou numérica como &.

Entidades nomeadas são mais legíveis. Entidades numéricas funcionam para qualquer caractere, mesmo sem nome definido. A ordem também importa: & deve ser escapado primeiro para evitar dupla codificação.

Aqui vai um exemplo real com a string 5 < 10 & true. Cada caractere reservado é substituído em uma passada da esquerda para a direita, enquanto o restante do texto permanece intacto.

Cada caractere reservado vira exatamente uma entidade, então não há um aumento geral de tamanho como no Base64. A maior parte do texto passa sem alterações.

Resultado:5 < 10 & true→5 < 10 & true

Precisa escapar HTML online sem instalar nada? O fluxo aqui é simples: escolha o modo, cole a entrada, selecione o formato de saída para o escape e copie o resultado. Tudo roda localmente no navegador.

A saída escapada mantém seu texto original e adiciona apenas as entidades seguras necessárias. Para voltar ao texto puro, cole, clique em Desescapar e copie. Se o resultado não mudar, sua entrada não tinha caracteres que precisassem de escape.

Uma única palavra não mostra bem como o escape e o desescape HTML se comportam com conteúdo real. A tabela abaixo apresenta cinco cenários comuns, de uma frase simples a um trecho HTML completo.

Observe o exemplo de comparação: ele escapa < e & na mesma passada e na ordem correta. Escapar & primeiro evita que < e > virem < e >.

Apenas cinco caracteres precisam ser escapados na maioria dos contextos HTML, embora alguns extras também sejam úteis. A tabela abaixo cobre o conjunto mais comum e alguns símbolos tipográficos adicionais.

Entidades nomeadas como © são mais fáceis de ler no código-fonte. Entidades numéricas como © funcionam mesmo quando um caractere não tem nome definido.

Também existe a forma hexadecimal: & representa o mesmo E comercial que &. A opção Numérica desta ferramenta gera decimal por padrão, mas o modo Desescapar também entende referências hexadecimais.

Além dos cinco caracteres reservados, o HTML também define entidades nomeadas para letras acentuadas e símbolos, como é e ñ. Isso é útil quando você não pode garantir UTF-8 no sistema de destino.

As pessoas também descrevem esses caracteres de formas diferentes: escape HTML de aspas, apóstrofo, E comercial, menor que ou maior que. As regras das entidades continuam as mesmas.

O escape HTML só funciona onde o navegador está interpretando conteúdo textual HTML. Dois pontos comuns quebram essa suposição: elementos <script>/<style> e atributos HTML que na verdade contêm JavaScript ou CSS.

Dentro das tags <script> e <style>, o navegador não interpreta entidades de jeito nenhum, ele trata o conteúdo como JavaScript ou CSS bruto. Escapar & dentro de um bloco <script> não protege nada; apenas imprime um & literal no seu código, o que normalmente está errado. Valores dinâmicos precisam de escape adequado de strings JS ou CSS, não de entidades HTML.

O mesmo se aplica a atributos como onclick e style. <p onclick="NOT-HERE"> e <p style="NOT-HERE"> contêm JavaScript e CSS, respectivamente. O escape HTML sozinho não torna seguro conteúdo não confiável dentro deles. Ajuste o escape ao contexto real, e não apenas ao fato de "estar dentro de uma tag HTML".

Muitos desenvolvedores não precisam apenas de uma conversão pontual: eles precisam da mesma lógica dentro do próprio app. Os exemplos abaixo cobrem três linguagens comuns para escapar e desescapar HTML.

Em JavaScript, não existe uma única função nativa para escapar HTML, por isso a abordagem com textContent continua sendo a mais segura no navegador. No servidor, prefira uma biblioteca específica de escape HTML.

Python e PHP são mais simples porque ambos já trazem funções dedicadas no conjunto padrão de ferramentas. Não é preciso instalar nada extra.

// Escape (safe display)
const el = document.createElement("div");
el.textContent = "Tom & Jerry";
const escaped = el.innerHTML;
console.log(escaped); // Tom & Jerry

// Unescape
const parser = new DOMParser();
const decoded = parser.parseFromString(escaped, "text/html").body.textContent;
console.log(decoded); // Tom & Jerry

import html

escaped = html.escape("Tom & Jerry")
print(escaped)  # Tom & Jerry

decoded = html.unescape(escaped)
print(decoded)  # Tom & Jerry

<?php
$escaped = htmlspecialchars("Tom & Jerry");
echo $escaped; // Tom &amp; Jerry

$decoded = htmlspecialchars_decode($escaped);
echo $decoded; // Tom & Jerry

Escapar HTML reduz o risco de XSS, mas não é proteção completa por si só. Escapar faz o texto do usuário ser renderizado como caracteres visíveis em vez de marcação, algo genuinamente útil e necessário. A proteção completa precisa de escape consciente do contexto: corpo HTML, atributos, JavaScript e contextos de URL têm, cada um, suas próprias regras.

Do lado da privacidade, esta ferramenta roda inteiramente no lado do cliente no seu navegador. Texto e HTML colados nunca são enviados para um servidor. Strings sensíveis, rascunhos de comentários, modelos internos e respostas de API que você está depurando, permanecem na sua máquina o tempo todo.

Trate esta ferramenta como uma forma de escapar ou decodificar corretamente entidades HTML para exibição, e não como um controle de segurança autônomo. Higienize qualquer HTML que você permita intencionalmente, texto rico ou saída Markdown, com uma biblioteca sanitizadora dedicada. Valide entradas não confiáveis também no lado do servidor, não apenas no momento da exibição. Para contexto de URL, nosso Codificador/Decodificador de URL lida com percent-encoding em query strings e caminhos.

A maioria dos erros de escape e desescape HTML se resume a alguns padrões recorrentes. Reconhecê-los poupa tempo na revisão da entrada.

Se o texto ainda parecer duplamente escapado depois de uma passada de Desescapar, execute o processo mais uma vez. Isso normalmente significa que ele foi codificado duas vezes em algum ponto anterior.

O escape HTML não é o único esquema para tornar texto seguro. A escolha correta depende do destino da saída. A tabela abaixo compara o escape HTML com as codificações com que ele é mais confundido.

Usar a codificação errada deixa o problema subjacente em aberto. Caracteres de escape HTML não vão proteger uma URL, e o percent-encoding também não vai proteger o texto do corpo HTML. Para query strings, nosso Codificador/Decodificador de URL lida corretamente com percent-encoding. Para dados binários como arquivos e imagens, nosso Codificador/Decodificador Base64 cobre codificação e decodificação Base64. Para literais de string dentro de JavaScript, uma ferramenta de escape de strings JavaScript aplica as sequências de escape corretas.