HTML 实体完整参考表

实战片段

要点：① 实体分号不可省，紧跟字母时 HTML5 的最长匹配会把字母吃进实体名，导致内容静默丢失；② 实体编码只在文本节点有效，属性与脚本上下文必须按上下文编码或直接用 DOM API 构造节点，高风险场景上 DOMPurify 并配 CSP；③ 属性值必须始终带引号，无引号属性遇到空格即被逃逸；④ 需要反转义时用 textarea 或 DOM 解析，不要手写正则，容易漏掉嵌套实体。

// ① 三个等价写法（分号都要写全）
const s = '&'      // &     字符
'&'             // &      命名实体
'&'             // &      十进制
'&'            // &     十六进制

// ② 用 DOM 构造而非字符串拼接（自动转义，最安全的默认做法）
const el = document.createElement('div')
el.textContent = '<script>alert(1)</script>'   // 纯文本，不解析为标签
el.innerHTML = '<script>alert(1)</script>'     // ⚠️ 会解析成真的 script
document.body.append(el)

// ③ 必须拼 HTML 时，转义「文本节点」的 5 个字符就够
const ESC = { '&’: ’&amp;’, ’<’: ’&lt;’, ’>’: ’&gt;’, ’"’: ’&quot;’, "’": ’&#39;' }
const esc = s => String(s).replace(/[&<>"']/g, c => ESC[c])

// ④ 属性值：按引号风格决定要不要转义单/双引号
const attrDouble = 'data-x="' + esc(userInput) + '"'   // 双引号包裹 ⇒ 单引号已转义
// ⚠️ 无引号属性最危险：空格即可逃逸，必须始终加引号
// <div class=USER>  ← USER 含空格就断了

// ⑤ 反转义：优先用 DOM，不自己写正则
const decode = html => {
  const d = document.createElement('textarea')
  d.innerHTML = html
  return d.value
}
console.log(decode('&lt;b&gt;'))    // <b>  （作为文本，不是标签）

// ⑥ 识别「实体没写分号」的隐患
const risky = '&ampx'                // 某些解析器解析为 &x，内容被吃掉
console.log(risky)                    // 始终写 '&amp;x' 才对