后端返回的HTML字符实体（转义字符）数据前端js怎么还原？

是的，我在捣鼓ZBlog插件喽，发现一个问题，就是用ZBlog自带方法，会把前端传输过来的一些字符，进行转义了，但是与我在前端展示的时候就要在反转义回来，不够这是正确的做法，也是因为怕发现XSS漏洞。

网上的关于怎么还原HTML字符实体（转义字符）的方法挺多的，这里我就不一一都列举出来了，我就写自己比较喜欢的方法，就是利用浏览器内部转换器实现HTML字符实体（转义字符）的转义/反转义，具体的代码如下：

/**
 * HTML字符实体（转义字符）编码
 * @param {*} str 字符串
 * @returns 编码的字符串
 */
function htmlCharacterEntitiesEncode(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

/**
 * HTML字符实体（转义字符）解码
 * @param {*} str 字符串
 * @returns 解码的字符串
 */
function htmlCharacterEntitiesDecode(str) {
  const div = document.createElement("div");
  div.innerHTML = str;
  return div.innerText;
}

//测试
console.log(htmlCharacterEntitiesEncode("<p>test</p>"));
console.log(htmlCharacterEntitiesDecode("&lt;p&gt;test&lt;/p&gt;"));

2021.12.28日更新

发现上面的方法，不能非常完美的解决所有的HTML字符实体（转义字符）的还原，比如我今天遇到的是&就无法正确的还原出&，经过验证，还有很多特殊的HTML字符实体（转义字符）也是不能还原的。

所以，对于要兼容大部分的HTML字符实体（转义字符）还原/编码的话，这里还是推荐大家用相对比较成熟的js库把：https://github.com/mdevils/html-entities

我猜测插件的原理，其实也是把字符串中含有HTML字符实体（转义字符），逐一替换掉，不过可能人家有对应的算法，可能速度很快把，所以，如果是项目中的话，还是推荐大家用现成的库比较好，毕竟省心，省时，我当时的需要只要还原的大部分的HTML字符实体（转义字符）就好了，无奈最后还是老老实实用库了。