JS - 实现HTML标签的转义、反转义的几种方法

2017-08-27 发布：hangge 阅读：17260

有时我们在前端页面上需要显示一些带有 HTML 标签的文本内容。如果希望这些标签不会被解析，而是直接显示，那么通常做法是后台先将这些标签转义（比如：< 转成 <、> 转成 > 等等），然后前端再显示这些转义后的文本。

但有时数据不通过服务端，而是纯前端操作。比如下面样例，用户通过 input 输入内容，并实时将内容显示在下方的 DIV 中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="js/jquery.js"></script>
    <script>
      function changeText() {
        var text = document.getElementById("input").value;
        document.getElementById("message").innerHTML = text;
      }
    </script>
    <style>
      #message {
        margin-top: 15px;
        background-color: #C9FFFF;
      }
    </style>
  </head>
  <body>
    <input id="input" type="text" onkeyup="changeText()" />
    <div id="message"></div>
  </body>
</html>

可以看到，如果我们输入的内容包含有 HTML 标签，那显示的时候这些标签也是会被解析的。

如果希望内容不被解析，就需要通过 JavaScript 对输入内容进行转义。下面介绍几种 JS 转义与反转义的方法。

方法一：通过正则表达式进行替换

1，HTML 标签的转义方法

//HTML标签转义（< -> &lt;）
function html2Escape(sHtml) {
 return sHtml.replace(/[<>&"]/g,function(c){
   return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];
 });
}

下面是使用样例：

var text = document.getElementById("input").value;
document.getElementById("message").innerHTML = html2Escape(text);

效果图如下：

2，HTML 标签的反转义方法

//HTML标签反转义（&lt; -> <）
function escape2Html(str) {
  var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){
    return arrEntities[t];
  });
}

方法二：通过 innerText 与 innerHTML 配合实现转换

这个实现原理是：innerText(textContent) 会获取纯文本内容，忽略 html 节点标签，而 innerHTML 会显示标签内容。

1，HTML 标签的转义方法

我们先将需转义的内容赋值给 innerText(textContent)，再获取它的 innerHTML 属性，这时获取到的就是转义后文本内容。

//HTML标签转义（< -> &lt;）
function html2Escape(sHtml) {
  var temp = document.createElement("div");
  (temp.textContent != null) ? (temp.textContent = sHtml) : (temp.innerText = sHtml);
  var output = temp.innerHTML;
  temp = null;
  return output;
}

2，HTML 标签的反转义方法

反转义的方法为先将转义文本赋值给 innerHTML，然后通过 innerText(textContent) 获取转义前的文本内容。

//HTML标签反转义（&lt; -> <）
function escape2Html(str) {
  var temp = document.createElement("div");
  temp.innerHTML = str;
  var output = temp.innerText || temp.textContent;
  temp = null;
  return output;
}

方法三：使用 jQuery 进行转换

如果项目中有引入 jQuery 那就更简单了，只需一句话就可以完成转换。其原理同上面的“方法二”是一样的。

1，HTML 标签的转义方法

//HTML标签转义（< -> &lt;）
function html2Escape(sHtml) {
  return $("<div/>").text(sHtml).html();
}

2，HTML 标签的反转义方法

//HTML标签反转义（&lt; -> <）
function escape2Html(str) {
  return $("<div/>").html(str).text();
}