2016-09-12发表技术随记5 分钟读完 (大约763个字)

如何实现 HTML 标签的转义和反转义

背景

在进行 web 项目开发过程中可能都使用过 js 的转义和反转义的方法,在此就不再讨论，不清楚的朋友可以查看参考资料中的链接地址。今天主要是讨论如何实现 HTML 标签的转义和反转义。

还记得很早以前使用 Dreamweaver 开发网页时可以很容易对 HTML 标签进行转义，自带提示功能和可视化转义功能。常见的 HTML 字符转义有：" "转义后 、"<"转义后"<"、">"转义后">"等，对于已经习惯了纯代码编写的前端朋友来说，在不查询 HTML 字符转义对照表以及第三方工具时，有没有其他办法实现 HTML 字符的转义呢？

需求

前端开发某些特定的功能时需要对用户的输入进行安全检测并对特殊字符进行转义
多端（PC 端、client 端、移动端）数据来源统一接口时，需要对特殊数据进行字符转义
对多端用户输入的内容进行前端检搜时需对特殊字符进行转义

实现

利用 innerHTML 和 innerText 对于内容获取和赋值的差异进行操作。innerHTML 可以获取和赋值带有 HTML 标签的内容，而 innerText 仅能获取纯文本内容，忽略 HTML 节点标签。所以我们可以先将需要转义的内容赋值给 innerText，然后再通过 innerHTML 获取其内容，这时获取的内容就是转义后的文本。代码如下：

HTML 标签转义成特殊字符

<script type="text/javascript">
 // HTML标签转义成特殊字符
 function encodeHTML(html){
  var output, elem = document.createElement('div');
  elem.textContent != null ? (elem.textContent = html) : (elem.innerText = html);
  output = elem.innerHTML;
  elem = null;
  return output;
 }

 var str1 = '<p>这里是一段有趣的内容，标签被转义了！</p>';
 // &lt;p&gt;这里是一段有趣的内容，标签被转义了！&lt;/p&gt;
 console.log(encodeHTML(str1));
</script>

特殊字符转义成 HTML 标签

<script type="text/javascript"></script>
 // 特殊字符转义成HTML标签
 function decodeHTML(html){
  var output, elem = document.createElement('div');
  elem.innerHTML = html;
  output = elem.innerText || elem.textContent;
  elem = null;
  return output;
 }

 var str2 = '&lt;p&gt;这里是一段有趣的内容，标签还原了！&lt;/p&gt;';
 // <p>这里是一段有趣的内容，标签还原了！</p>
 console.log(decodeHTML(str2));

</script>

注：火狐不支持innerText，需要使用textContent属性，而IE早期版本不支持此属性，为了同时兼容IE及火狐，需要进行判断操作，现主流浏览器支持innerText也支持textContent。

如何实现 HTML 标签的转义和反转义

背景

需求

实现

参考资料

分类

标签

最新文章