Entidades HTML são marcadores de posição para caracteres especiais em HTML. Caracteres como <, >, &, " e ' têm significados específicos dentro do HTML e devem ser escapados para evitar a interrupção da estrutura do documento. Ao recuperar HTML de um servidor ou entrada do usuário, geralmente é necessário decodificar essas entidades para exibi-las e manipulá-las corretamente. Este artigo explora dois métodos para decodificar entidades HTML usando JavaScript.
Sumário
- Decodificando Entidades HTML com JavaScript Vanilla
- Decodificando Entidades HTML com a biblioteca
he
Decodificando Entidades HTML com JavaScript Vanilla
JavaScript Vanilla fornece uma maneira simples de decodificar entidades HTML usando o DOMParser integrado do navegador. Este método é eficiente e não requer bibliotecas externas. No entanto, pode não lidar com todas as entidades perfeitamente, particularmente as menos comuns ou personalizadas.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Exemplo de uso:
const encodedText = '<p>Este é um parágrafo com & nele.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Saída: Este é um parágrafo com & nele.
Esta função analisa a string de entrada como HTML usando DOMParser. A propriedade textContent do elemento raiz retorna então o texto decodificado, removendo tags HTML e substituindo entidades. Observe que este método também remove quaisquer tags HTML presentes na entrada.
Decodificando Entidades HTML com a biblioteca he
Para uma decodificação mais abrangente, especialmente para uma gama mais ampla de entidades, a biblioteca he é uma solução robusta. É leve e facilmente disponível via npm ou CDN.
Instalação (npm):
npm install he
Instalação (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
Após a instalação, use a função he.decode():
// Assumindo que a biblioteca 'he' esteja incluída
const encodedText = '<p>Este é um parágrafo com & e ' nele.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Saída: Este é um parágrafo com & e ' nele.
he.decode() lida com um espectro mais amplo de entidades, incluindo entidades numéricas como ' (aspas simples).
Escolhendo um Método
Ambos os métodos decodificam efetivamente entidades HTML. A abordagem JavaScript vanilla é adequada para casos simples e evita dependências externas. Para cenários complexos ou uma gama mais ampla de entidades, a biblioteca he fornece uma solução mais confiável. Sempre sanitize a entrada do usuário para evitar vulnerabilidades de segurança.