如何将转义后的HTML元素转换为可正常渲染的可读HTML？

原因说明 #

你看到的转义后标签内容，本质是HTML实体被当成纯文本渲染导致的，要么是插入DOM时用了纯文本写入API，要么是服务端返回的内容本身就已经被转义了。

解决方案 #

1. 调整DOM插入方式

不要使用纯文本写入的API/语法，改用支持HTML解析的方式：

• 原生JS场景：替换textContent/innerText为innerHTML

// 错误写法
document.querySelector('.markdown-content').textContent = markedParseRes;
// 正确写法
document.querySelector('.markdown-content').innerHTML = markedParseRes;

• 框架场景：使用框架提供的HTML渲染语法
  • Vue：使用v-html指令

  <div class="markdown-content" v-html="markedParseRes"></div>
  

  • React：使用dangerouslySetInnerHTML属性

  <div className="markdown-content" dangerouslySetInnerHTML={{__html: markedParseRes}} />
  

2. 服务端转义的修复

如果确认接口返回的内容本身就包含<、"这类HTML实体，说明服务端输出时做了全局转义，你可以优先调整服务端逻辑，关闭该接口对应字段的转义；也可以在前端先做实体还原再插入：

function htmlUnescape(str) {
  const escapeMap = {
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#039;': "'",
    '&amp;': '&'
  };
  return str.replace(/&(lt|gt|quot|#039|amp);/g, match => escapeMap[match]);
}

// 还原后再插入DOM
const originHtml = htmlUnescape(apiReturnContent);

安全提示：直接渲染用户生成的HTML存在XSS注入风险，建议使用DOMPurify对marked.js输出的HTML做安全过滤后再渲染。

内容的提问来源于stack exchange，提问作者Dastan