HTML实体是HTML中特殊字符的占位符。诸如<、>、&、"和'之类的字符在HTML中具有特定含义，必须对其进行转义以避免破坏文档结构。当从服务器或用户输入中检索HTML时，通常需要解码这些实体以正确显示和操作它们。本文探讨了使用JavaScript解码HTML实体的两种方法。
目录
使用原生JavaScript解码HTML实体
原生JavaScript提供了一种使用浏览器内置的DOMParser解码HTML实体的简单方法。此方法高效且不需要外部库。但是，它可能无法完美处理所有实体，特别是较不常见或自定义的实体。
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// 示例用法：
const encodedText = '<p>This is a paragraph with & in it.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // 输出：This is a paragraph with & in it.
此函数使用DOMParser将输入字符串解析为HTML。然后，根元素的textContent属性返回解码后的文本，删除HTML标签并替换实体。请注意，此方法还会删除输入中存在的任何HTML标签。
使用he库解码HTML实体
对于更全面的解码，特别是对于更广泛的实体，he库是一个强大的解决方案。它轻量级且可通过npm或CDN轻松获得。
安装 (npm):
npm install he
安装 (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
安装后，使用he.decode()函数：
// 假设已包含'he'库
const encodedText = '<p>This is a paragraph with & and ' in it.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // 输出：This is a paragraph with & and ' in it.
he.decode()处理更广泛的实体，包括数值实体，例如'（单引号）。
选择方法
两种方法都能有效地解码HTML实体。原生JavaScript方法适用于简单的情况，并且避免了外部依赖。对于复杂的情况或更广泛的实体，he库提供了更可靠的解决方案。始终对用户输入进行消毒以防止安全漏洞。