HTML Entities Reference

Practical Snippet

Key points: (1) never omit the semicolon — when a letter follows, HTML5 longest-match absorbs it into the entity name and content is silently lost; (2) entity encoding only protects text nodes; attributes and script contexts need context-aware encoding or DOM-based construction, and anything high risk deserves DOMPurify plus CSP; (3) always quote attribute values, since an unquoted attribute breaks on the first space; (4) to unescape, use textarea or DOM parsing instead of hand-written regular expressions, which easily miss nested entities.

// ① 三个等价写法（分号都要写全）
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' 才对