本文中代码部分编码发布后会解码，以图片为准

HTML 实体编码是指什么

HTML 实体编码是一种在 HTML 文档中表示特殊字符的方法。由于 HTML 中某些字符具有特殊的含义，例如小于号（<）、大于号（>）、引号（"）等，当需要在文本中显示这些字符本身，而不是让浏览器将其解析为 HTML 标签或属性的一部分时，就需要使用 HTML 实体编码。

HTML 实体编码以 & 符号开头，以 ; 符号结尾，中间是实体名称或实体编号。例如，< 表示小于号（<），> 表示大于号（>），& 表示和号（&）。除了常见的字符，还有一些用于表示特殊符号、空格、版权符号等的实体编码，如表示非 - breaking 空格，(c) 表示版权符号（(c)）。

使用 HTML 实体编码可以确保浏览器正确地显示文本中的特殊字符，避免它们被误解为 HTML 代码，从而保证页面的正确渲染和内容的准确呈现。

HTML 实体如何解码

例如字符串：

解码function

function decodeHtmlEntitiesWithInnerHTML(encoded) {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = encoded;
    return tempElement.textContent;
}
 // decodeHtmlEntitiesWithInnerHTML('示例字符串')
// '
'
function decodeHtmlEntities(html) {
    let doc = new DOMParser().parseFromString(html, "text/html");
    return doc.documentElement.textContent;
}
 // decodeHtmlEntities('示例字符串')
// '
'

什么情况下会出现HTML 实体编码

富文本编辑器

在富文本编辑器中，用户输入的内容可能包含各种特殊字符，而编辑器需要将这些内容以 HTML 格式保存或传输。为了避免特殊字符被浏览器误解为 HTML 标签，编辑器会将这些特殊字符转换为 HTML 实体编码。例如，用户输入小于号 <，编辑器会将其转换为 <。这样在将内容保存到数据库或传输到服务器时，特殊字符能正确存储和传递，后续展示时再进行解码显示。

数据传输与存储

网络传输：当通过网络传输包含特殊字符的 HTML 数据时，为了确保数据在传输过程中不被破坏或误解，通常会将特殊字符进行实体编码。比如在表单提交时，如果用户输入了特殊字符，表单数据在传输前可能会被编码为实体形式。
数据库存储：在将 HTML 内容存储到数据库时，为了保证数据的完整性和一致性，也会对特殊字符进行实体编码。数据库可能无法正确处理一些特殊字符，通过编码可以避免存储和读取时出现问题。

避免 XSS 攻击

为了防止跨站脚本攻击（XSS），开发者会对用户输入的内容进行过滤和编码。攻击者可能会通过在输入框中注入恶意的 HTML 或 JavaScript 代码来攻击网站。通过将用户输入的特殊字符转换为 HTML 实体编码，可以使这些恶意代码无法被浏览器执行，从而提高网站的安全性。例如，将 <script> 标签编码为 <script>，这样浏览器就不会将其作为脚本执行。

兼容性问题

在某些旧版本的浏览器或特定的环境中，可能对某些特殊字符的支持存在问题。使用 HTML 实体编码可以提高页面在不同浏览器和环境中的兼容性。例如，一些旧浏览器可能无法正确显示某些特殊符号，通过使用对应的实体编码可以确保这些符号在各种环境中都能正常显示。

如何进行HTML 实体编码

1. 使用自定义函数手动编码

function htmlEntityEncode(str) {
    const entityMap = {
        '&': '&',
        '<': '<',>': '>',
        '"': '"',
        "'": '''
    };
    return str.replace(/[&<>"']/g, function (match) {
        return entityMap[match];
    });
}

const originalText = 'This is a  string with "quotes" & \'apostrophes\'.';
const encodedText = htmlEntityEncode(originalText);
console.log(encodedText);

2. 创建 DOM 元素利用textContent和innerHTML特性编码

function htmlEntityEncodeWithDOM(str) {
    const tempElement = document.createElement('div');
    tempElement.textContent = str;
    return tempElement.innerHTML;
}

const original = 'This is a  string with "quotes" & \'apostrophes\'.';
const encoded = htmlEntityEncodeWithDOM(original);
console.log(encoded);