后端返回的HTML字符实体(转义字符)数据前端js怎么还原?

原创 野人  2021-12-26 17:20  阅读 105 次

是的,我在捣鼓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字符实体(转义字符)就好了,无奈最后还是老老实实用库了。

本文地址:https://www.yerenwz.com/5437.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论