如何在API调用中渲染响应中的HTML标签？

你的问题核心是API返回的HTML标签被转义成了HTML实体（比如<代替<、"代替"），导致渲染时无法解析为真实HTML元素。以下是不同场景的解决方法：

原生JavaScript实现 #

先解码API返回的实体字符串，再插入到DOM中：

// 假设apiContent是从接口获取的内容（已转译并移除外链）
const apiContent = '比特币是一种让移动支付变得便捷的网络货币，交易手续费极低，能保护你的身份，且无需中央机构和银行支持，随时随地可用。比特币的总发行量被设定为2100万枚，因此属于通缩型货币。比特币采用**SHA-256**哈希算法，平均交易确认时间为10分钟。如今矿工使用专门用于比特币挖矿的ASIC芯片进行挖矿，哈希率已飙升至P级别。作为首个成功的在线加密货币，比特币启发了其他替代货币，如**莱特币**、**点点币**、**质数币**';
// 解码HTML实体（针对API返回的带实体字符串）
const decoder = document.createElement('div');
decoder.innerHTML = apiContent;
const decodedHtml = decoder.innerHTML;
// 将解码后的内容插入目标元素
document.getElementById('target-container').innerHTML = decodedHtml;

React框架实现 #

React默认会转义HTML，需使用dangerouslySetInnerHTML渲染原始内容，同时先完成实体解码：

function CryptoInfo() {
  const apiContent = '比特币是一种让移动支付变得便捷的网络货币，交易手续费极低，能保护你的身份，且无需中央机构和银行支持，随时随地可用。比特币的总发行量被设定为2100万枚，因此属于通缩型货币。比特币采用**SHA-256**哈希算法，平均交易确认时间为10分钟。如今矿工使用专门用于比特币挖矿的ASIC芯片进行挖矿，哈希率已飙升至P级别。作为首个成功的在线加密货币，比特币启发了其他替代货币，如**莱特币**、**点点币**、**质数币**';
  
  // 解码HTML实体
  const decoder = document.createElement('div');
  decoder.innerHTML = apiContent;
  const decodedHtml = decoder.innerHTML;

  return <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />;
}

Vue框架实现 #

Vue的v-html指令会自动处理实体解码并渲染HTML：

<template>
  <div v-html="apiContent"></div>
</template>

<script>
export default {
  data() {
    return {
      apiContent: '比特币是一种让移动支付变得便捷的网络货币，交易手续费极低，能保护你的身份，且无需中央机构和银行支持，随时随地可用。比特币的总发行量被设定为2100万枚，因此属于通缩型货币。比特币采用**SHA-256**哈希算法，平均交易确认时间为10分钟。如今矿工使用专门用于比特币挖矿的ASIC芯片进行挖矿，哈希率已飙升至P级别。作为首个成功的在线加密货币，比特币启发了其他替代货币，如**莱特币**、**点点币**、**质数币**'
    };
  }
};
</script>

注意事项 #

如果API返回的内容来自不可信来源，务必使用DOMPurify这类库过滤危险HTML标签和脚本，避免XSS攻击。

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