如何将模板字符串渲染为HTML？解决纯文本输出问题

嘿，我来帮你搞定这个问题！你现在遇到的是转义后的HTML字符串没法被正常解析渲染，反而显示成纯文本的情况，下面分两种常见场景给你解决方案：

React 项目中的解决方法 #

React为了防止XSS攻击，默认会自动转义所有字符串内容，所以直接返回<div>foo</div>这种转义后的字符串，就会被当成纯文本展示。要让它渲染成真实的HTML，得两步走：

1. 先把转义的HTML实体解码成正常的HTML字符串
2. 使用dangerouslySetInnerHTML属性来渲染

具体代码如下：

function MyComponent() {
  const foo = `<div>foo</div>`;
  
  // 解码HTML实体的小工具函数
  const decodeHtml = (html) => {
    const temp = document.createElement('textarea');
    temp.innerHTML = html;
    return temp.value;
  };

  return <div dangerouslySetInnerHTML={{ __html: decodeHtml(foo) }} />;
}

敲黑板提醒哦：这个属性名字里的“dangerously”可不是随便加的！如果foo的内容来自用户输入或者其他不可信来源，直接渲染会有XSS攻击的风险，一定要确保内容是安全可信的！

原生 JavaScript 环境中的解决方法 #

如果是在普通网页里，不需要框架的话，操作就更直接了：

// 你的转义后HTML字符串
const escapedFoo = `<div>foo</div>`;

// 先解码HTML实体
function decodeHtml(html) {
  const tempElement = document.createElement('textarea');
  tempElement.innerHTML = html;
  return tempElement.value;
}

const decodedFoo = decodeHtml(escapedFoo);
// 获取页面上的容器元素，把解码后的HTML插进去
const container = document.getElementById('your-container-id');
container.innerHTML = decodedFoo;

这样浏览器就会自动解析字符串并渲染成对应的HTML元素，最终显示出你想要的foo文本啦。

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