HTML实体转字符方法大全及代码示例

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML 实体安全转换为对应字符，通常可以通过编程语言中的内置函数或库来实现。以下是一些常见语言的示例：1. Python使用 html 模块中的 unescape() 函数：import html html_entity = "

" text = html.unescape(html_entity) print(text) # 输出:

2. JavaScript在浏览器中可以使用 DOMParser 或 decodeURIComponent（注意：需先将实体转义为 URL 编码）。使用 DOMParser（推荐）：function decodeHtmlEntities(html) { const doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent; } const htmlEntity = ""; const text = decodeHtmlEntities(htmlEntity); console.log(text); // 输出: 使用 decodeURIComponent（仅适用于部分实体）：const htmlEntity = ""; const text = decodeURIComponent(htmlEntity.replace(/&/g, '%')); console.log(text); // 输出: 注意》，聊聊，希望可以帮助到正在努力赚钱的你。

本文介绍在 JavaScript 中高效、可扩展地将常见 HTML 实体（如 `–`、`&` 等）还原为原始字符的方法，提供轻量函数实现、关键注意事项及生产环境优化建议。

在前端开发中，常会遇到从服务端或富文本编辑器中获取的字符串包含 HTML 实体（如 –、—、"、' 等），而业务逻辑或 UI 渲染需要的是其对应的原始 Unicode 字符（例如 – 或 -）。直接使用 innerHTML + 临时 DOM 节点虽可行，但存在 XSS 风险且性能开销大；更安全、可控的方式是采用白名单式正则替换。

以下是一个简洁、可维护的转换函数：

function replaceHTMLEntities(str) {
  const htmlEntities = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    ''': "'",
    ''': "'", // 补充标准实体
    '–': '-', // en dash → hyphen
    '—': '—', // em dash
    ' ': '\u00A0', // non-breaking space
    '©': '©',
    '®': '®',
  };

  return str.replace(/&[\w#]+;/g, entity => {
    return htmlEntities[entity] || entity;
  });
}

// 使用示例
const price = "CHF 150.– (brutto)";
console.log(replaceHTMLEntities(price)); // "CHF 150.- (brutto)"

const text = "He said "It's fine” and left.";
console.log(replaceHTMLEntities(text)); // "He said "It's fine" and left."

✅ 关键说明与最佳实践：

• 正则 /&[\w#]+;/g 精准匹配以 & 开头、以 ; 结尾、中间含字母或 # 的实体（覆盖命名实体如 – 和数字实体如 –）；
• 映射表采用显式白名单，避免误解析非法或危险实体（如 &javascript:...），杜绝 XSS 漏洞；
• 未定义的实体（如 ”）将被原样保留，保障数据完整性；若需支持更多实体，只需扩展 htmlEntities 对象即可；
• 如需兼容全部 HTML5 实体，推荐使用成熟库如 he（支持解码、编码、严格模式等），但在简单场景下自定义函数更轻量、无依赖。

⚠️ 注意事项：

• 该函数不处理十进制/十六进制数字实体的动态解析（如 – 或 –），如需完整支持，请结合 String.fromCodePoint() 或使用 he.decode()；
• 切勿在不可信内容上直接使用 eval()、Function 构造器或 document.createElement('div').innerHTML = ... 方式解析，极易引发安全问题；
• 若字符串来自用户输入且需双向转换（编码 ↔ 解码），务必统一编码规范，并对输出做 HTML 转义后再渲染。

综上，此方案在安全性、可读性与扩展性之间取得良好平衡，适用于大多数中小型项目中的 HTML 实体清理需求。

到这里，我们也就讲完了《HTML实体转字符方法大全及代码示例》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！