如何渲染GET请求返回的转义HTML字符串？

通过GET请求拿到的HTML内容是双重转义后的格式，示例如下：

<pre class="some-class" spellcheck="false">&lt;p&gt;SomeText&lt;/p&gt;
&lt;div class="article__image"&gt;
&nbsp;&lt;img alt="alt-text" src="null" data-src="/upload/images/11.jpg" class="img--responsive lazyload"&gt;
&lt;/div&gt;
</pre><p>&nbsp;&lt;br&gt;</p>

尝试几种渲染方式都踩坑：

• <pre v-html="text"></pre>：只显示纯文本，内部HTML标签完全没解析
• <div>{{ data }}</div>：和上面效果一样，还是纯文本
• 把v-html塞到<pre>里：<pre>没按纯文本格式渲染，内部的<p>、<img>也没正常显示

核心原因是你拿到的HTML是双重转义的（比如<被转成了<），得先把这些转义字符还原成真实的HTML标签，再渲染。

1. 写个反转义的工具函数 #

在Vue组件里加个方法，把转义后的字符串还原成正常HTML：

methods: {
  unescapeHtml(html) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return tempDiv.textContent || tempDiv.innerText || '';
  }
}

嫌麻烦的话也可以用这个更简洁的写法（现代浏览器都支持）：

methods: {
  unescapeHtml(html) {
    return new DOMParser().parseFromString(html, 'text/html').body.textContent;
  }
}

2. 根据需求选渲染方式 #

场景1：要让内部的<p>、<img>正常显示 #

直接用v-html渲染反转义后的内容，不用套外层<pre>：

<template>
  <div class="screen card">
    <div v-html="unescapeHtml(text)"></div>
  </div>
</template>

场景2：要保留<pre>的换行格式，同时解析内部标签 #

把反转义后的内容放到<pre>里，这样既保留<pre>的纯文本换行，又能正常解析内部HTML：

<template>
  <div class="screen card">
    <pre v-html="unescapeHtml(text)"></pre>
  </div>
</template>

额外提醒：懒加载图片 #

如果图片用了lazyload类，得确保项目里已经引入了懒加载库（比如lozad.js），然后在组件挂载后初始化：

mounted() {
  // 以lozad为例
  const observer = lozad('.lazyload');
  observer.observe();
}

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