Como decodificar entidades HTML usando JavaScript

HTML armazena seus caracteres reservados como entidades de personagem. As entidades de personagens são seqüências de texto simples que começam com um & e terminam com um;. As entidades HTML são necessárias porque, se você estiver tentando escrever personagens especiais do HTML como o texto simples, o HTML deve poder armazená -los de alguma forma para que não sejam interpretados como código HTML. As entidades HTML são necessárias para a visualização adequada da renderização do texto nas páginas da web. As entidades também podem ser usadas ao tentar escrever personagens que geralmente não são encontrados em teclados padrão.

Decodificação de entidades HTML

As entidades HTML podem ser decodificadas usando vários métodos diferentes envolvendo bibliotecas de baunilha JavaScript ou JavaScript. Este guia só passará por métodos de JavaScript de baunilha para decodificar entidades HTML, pois são fáceis e diretas.

Decodificar entidades HTML com o elemento DOM

O primeiro método é usando o elemento textarea. Como o nome sugere, o elemento textarea é usado para criar uma área de texto simples, onde cada caractere é interpretado como um texto simples simples.:

função decodificar (str)
Deixe txt = documento.createElement ("textarea");
TXT.inerhtml = str;
retornar txt.valor;

No código acima, criamos o elemento textarea pela primeira vez usando o documento.Método CreateElement (). Em seguida, escrevemos a string contendo entidades HTML dentro da textarea usando a propriedade InnerHTML. Dessa forma, a string será convertida em texto simples e entidades serão convertidas em caracteres. Por fim, devolvemos a corda armazenada dentro da variável txt, que é a textária.

Agora, se chamarmos a função de decodificação com uma entidade HTML como parâmetro, ela o retornará como texto simples:

deixe codedstr = "

";
Seja decodedstr = decodificação (codedstr);
console.log (decodedstr);

Decodificar entidades HTML com o Domparser.Método parsefromstring ()

O segundo método é usando o Domparser.Método parsefromstring (). O Domparser.O método parsefromstring () pega uma string contendo html e o retorna como um elemento HTML:

função decodificar (str)
deixe txt = new Domparser ().parsefromstring (str, "text/html");
retornar txt.DocumentElement.TextContent;

No código acima, passamos pela primeira vez na sequência como um argumento para o Domparser.Método parsefromstring () e recuperou -o como um elemento HTML, especificando o segundo argumento como "texto/html". Em seguida, retornamos o conteúdo de texto do elemento HTML recém -criado.

Agora chamando a função decode ():

deixe codedstr = "

";
Seja decodedstr = decodificação (codedstr);
console.log (decodedstr);

Conclusão

As entidades HTML são necessárias para a visualização adequada do texto nas páginas da web. Alguns sites contêm trechos de código como texto simples. Sem entidades, seria difícil diferenciar entre o que é um código HTML para a página da web e o que é apenas um texto simples.