本文介绍在 javascript 中高效、可扩展地将常见 html 实体（如 `–`、`&` 等）还原为原始字符的方法，提供轻量函数实现、关键注意事项及生产环境优化建议。
在前端开发中，常会遇到从服务端或富文本编辑器中获取的字符串包含 HTML 实体（如 –、—、"、' 等），而业务逻辑或 UI 渲染需要的是其对应的原始 Unicode 字符（例如 – 或 -）。直接使用 innerHTML + 临时 DOM 节点虽可行，但存在 XSS 风险且性能开销大；更安全、可控的方式是采用白名单式正则替换。
以下是一个简洁、可维护的转换函数：
function replaceHTMLEntities(str) {
const htmlEntities = {
'&': '&',
'zuojiankuohaophpcn': '<',
'youjiankuohaophpcn': '>',
'"': '"',
''': "'",
''': "'", // 补充标准实体
'–': '-', // 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 实体清理需求。
