HTML特殊字符怎么读取？符号代码大全避坑指南

本文揭秘 HTML 特殊字符在 DOM 操作中的“隐形陷阱”：当你用 innerHTML 读取内容时，看似原始的 `<` 等实体编码早已被浏览器自动解析为对应符号（如 `

HTML 特殊字符不是“读取”出来的，而是被浏览器解析后显示为对应符号——你写的  ，浏览器看到的是空格，而不是字符串  ；想拿到原始符号代码（比如存进数据库或做转义判断），得从源头拦截或反向编码。

为什么 innerHTML 拿不到原始的 < 而是

因为 innerHTML 返回的是浏览器已解析后的 DOM 内容。你写

<span>

，DOM 构建完，innerHTML 读出来就是

——< 已被转成 ，不可逆。

• 要保留原始实体写法，必须用 textContent 或 innerText（但它们不包含标签，只返回纯文本）
• 如果目标是“获取用户输入中带实体的原始字符串”，别依赖 HTML 解析，改用 input.value 或 textarea.value 直接读值
• document.documentElement.outerHTML 也不行——它输出的是当前已解析+重序列化的 HTML，实体仍被转换

encodeURIComponent 和 encodeURI 不处理 HTML 实体

这两个函数只对 URL 中的特殊字符（如空格、中文、#、?）做百分号编码，完全无视  、© 这类 HTML 实体。传进去 "a b"，结果还是 "a%26nbsp%3Bb"，  被当普通字符串字面量处理了。

• 需要把 HTML 实体还原成 Unicode 字符再编码？先用 DOMParser 解析一次：

  const doc = new DOMParser().parseFromString('a b', 'text/html');
  const text = doc.body.textContent; // → "a b"
  encodeURIComponent(text); // → "a%20b"

• 想批量把 Unicode 字符转回实体（比如 © → ©）？没有内置函数，得查表或用正则 + String.codePointAt() 匹配常见符号

服务端传来的   在前端显示为空格，但 JS 判断 === ' ' 失败

因为   是不间断空格（NBSP），Unicode 码位 U+00A0，和普通空格 U+0020 不同。肉眼一样，JS 字符串里却是两个完全不同的字符。

• 对比前统一 normalize：str.replace(/\u00A0/g, ' ') === 'hello world'
• 正则匹配要显式写两种空格：/[ \u00A0\u2000-\u200F\u2028-\u2029]/g
• Vue/React 的 v-model 或 value 绑定不会自动 normalize，输入框粘贴进来的   会原样保留，可能引发校验失败

真正麻烦的不是怎么转，而是哪一步该转、哪一步不该转——前后端约定用 Unicode 还是实体、富文本编辑器是否自动转义、JSON 接口要不要预处理，这些边界不厘清，光靠一个 replace(/&/g, '&') 解决不了问题。

以上就是《HTML特殊字符怎么读取？符号代码大全避坑指南》的详细内容，更多关于的资料请关注golang学习网公众号！