JavaScript如何将API返回的转义HTML字符串转换为正常HTML？

接口返回的HTML内容经过了两层HTML实体转义，且首尾额外包裹了一层双引号，这是普通单次解码方法失效、代码抛出语法错误的核心原因：

• 第一层转义将原始HTML的</>/"转换为</>/"
• 第二层转义将上述实体中的&再次转换为&，最终呈现为你看到的</>/"
• 首尾未处理的双引号会打断JS字符串语法，直接触发unexpected token: identifier报错

不需要引入第三方库，按3步处理即可得到可直接渲染的标准HTML：

• 去除返回值首尾多余的包裹双引号
• 连续执行两次HTML实体解码，还原两层转义的内容
• 将最终得到的字符串直接插入DOM节点即可渲染

// 接口返回的原始值
const apiRawResult = `"<button type=button class=Button onclick="openwp('1677008','RHpdFBx7GS9YGFEwFmUUCyE4Ih8lHyA!H2JbUENBa1BV')" ><i class="fa fa-pencil-square-o" style="margin: 0 4px 0 0"></i>Enter Budget</button>"`;

// 原生JS实体解码函数，兼容所有标准HTML实体
const decodeEntities = (str) => {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
};

// 1. 去除首尾多余双引号
let htmlStr = apiRawResult.trim().replace(/^"|"$/g, '');
// 2. 两次解码还原两层转义
htmlStr = decodeEntities(decodeEntities(htmlStr));

// 此时htmlStr就是目标HTML结构，可直接渲染
// 示例：插入到页面容器中
// document.querySelector('.btn-container').innerHTML = htmlStr;

处理后输出的HTML结构和预期完全一致：

<button type="button" 
        class="Button" 
        onclick="openwp('1677008','RHpdFBx7GS9YGFEwFmUUCyE4Ih8lHyA!H2JbUENBa1BV')">
  <i class="fa fa-pencil-square-o" 
     style="margin: 0 4px 0 0" 
     data-original-title="" 
     title="">
  </i>
  Enter Budget
</button>

• Lodash unescape、常规第三方解码方法默认只执行一次解码，仅能把&还原为&，输出的仍是带</>的第一层转义内容，无法得到原生DOM标签
• 未提前去除首尾的双引号时，双引号会截断JS字符串赋值语句，直接触发语法错误

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