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

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

1，HTML 标签的转义方法

//HTML标签转义（  < -----> &lt;）

function html2Escape(sHtml) {

 return sHtml.replace(/[<>&"]/g,function(c){

   return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];

 });

}

 

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 进行转换

1，HTML 标签的转义方法

//HTML标签转义（< -> &lt;）

function html2Escape(sHtml) {

  return $("<div/>").text(sHtml).html();

}

 

2，HTML 标签的反转义方法

 

//HTML标签反转义（&lt; -> <）

function escape2Html(str) {

  return $("<div/>").html(str).text();

}

另外一种转义的方法：

 function escape2Html(str) {
    var temp = "";
    if (str.length == 0) return "";
    temp = str.replace(/&/g, "&");
    temp = temp.replace(/&lt;/g, "<");
    temp = temp.replace(/&gt;/g, ">");
    temp = temp.replace(/&nbsp;/g, " ");
    temp = temp.replace(/&#39;/g, "\'");
    temp = temp.replace(/&quot;/g, "\"");
    return temp;
};