html 实体字符转，HTML实体字符转换

HTML实体字符转换是将特殊字符与对应编码相互转换的技术，通过将等符号转换为<、&、>等实体编码，可防止浏览器将其误解析为HTML标签，确保字符在网页中正确显示，该技术支持编码（字符转实体）与解码（实体转字符）双向操作，广泛应用于网页开发、文本处理等场景，能有效避免因特殊字符导致的页面渲染异常，保障内容安全与准确性。

HTML实体字符转换：从原理到实践的全解析

在Web开发中，我们经常遇到一些特殊字符——比如小于号<、大于号>、和号&，这些字符在HTML中具有特殊含义（如标签定义、实体字符起始标记），如果直接在HTML内容中写入，可能会导致页面解析错误或安全漏洞。HTML实体字符转换就成了必不可少的技术，本文将从实体字符的定义、转换原理、方法到实践场景,全面解析这一核心知识点。

什么是HTML实体字符？

HTML实体字符（HTML Entity）是一种特殊的编码方式，用于表示HTML中的保留字符、不可见字符或无法直接输入的字符，它的语法结构为：& + 实体名称 + 或 &# + 数字编码 + 。

常见实体字符示例

核心作用：通过转义，让浏览器将特殊字符视为普通文本内容，而非HTML语法标记，避免解析错误或XSS（跨站脚本）攻击。

HTML实体字符转换的两种方向

实体字符转换包含编码（Encode）和解码（Decode）两个方向：

• 编码：将特殊字符转换为对应的实体字符（如< → <），用于在HTML中安全显示内容。
• 解码：将实体字符还原为原始字符（如< → <），用于处理已转义的内容（如从数据库读取的富文本）。

如何进行HTML实体字符转换？

在HTML中直接编码（静态场景）

在HTML文件中，若需显示特殊字符，可直接写对应的实体名称或数字编码,浏览器会自动解析为原始字符显示。

示例：

<!-- 显示 "5 < 10" 且不解析为标签 -->
<p>5 &lt; 10</p> <!-- 渲染结果：5 < 10 -->
<!-- 显示 HTML 源码 -->
<code>&lt;div&gt;Hello&lt;/div&gt;</code> <!-- 渲染结果：<div>Hello</div> -->

使用JavaScript动态转换（动态场景）

在动态页面中（如用户输入、AJAX返回数据），需通过JavaScript实现编码和解码,以下是常用方法：

（1）编码：将特殊字符转为实体字符

• 方法1：手动替换（适用于少量字符）
  通过正则表达式匹配特殊字符,替换为对应实体。

  function htmlEncode(str) {
    return str.replace(/[&<>"']/g, function(char) {
      const entities = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&apos;'
      };
      return entities[char];
    });
  }
  // 示例
  const input = "<script>alert('XSS')</script>";
  const encoded = htmlEncode(input);
  console.log(encoded); // 输出：&lt;script&gt;alert(&#x27;XSS&#x27;)&lt;/script&gt;

• 方法2：使用DOM API（推荐，避免遗漏字符）
  浏览器的document.createTextNode()方法会自动对特殊字符进行编码,可通过创建临时节点获取编码结果。

  function htmlEncodeByDOM(str) {
    const div = document.createElement('div');
    div.textContent = str; // 自动编码特殊字符
    return div.innerHTML;
  }
  // 示例
  const input = "10 > 5 & 5 < 10";
  console.log(htmlEncodeByDOM(input)); // 输出：10 &gt; 5 &amp; 5 &lt; 10

（2）解码：将实体字符还原为原始字符

• 方法1：手动替换（反向映射）
  与编码类似,反向替换实体字符为原始字符。

  function htmlDecode(str) {
    return str.replace(/&lt;/g, '<')
              .replace(/&gt;/g, '>')
              .replace(/&amp;/g, '&')
              .replace(/&quot;/g, '"')
              .replace(/&apos;/g, "'");
  }
  // 示例
  const encoded = "Hello &lt;world&gt;";
  console.log(htmlDecode(encoded)); // 输出：Hello <world>

• 方法2：使用DOM API（推荐，支持所有实体）
  通过设置元素的innerHTML,浏览器会自动解码实体字符。

  function htmlDecodeByDOM(str) {
    const div = document.createElement('div');
    div.innerHTML = str; // 自动解码实体字符
    return div.textContent;
  }
  // 示例
  const encoded = " 不换行空格";
  console.log(htmlDecodeByDOM(encoded)); // 输出： 不换行空格（ 被解码为空格）

（3）使用现成库（复杂场景）

若需处理大量实体字符或复杂场景