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

原文链接：https://blog.csdn.net/huanggang0101/article/details/99621029

方法一：通过正则表达式进行替换
1，HTML 标签的转义方法

?

1 2 3 4 5 6 7 8 9 10 11

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

　2，HTML 标签的反转义方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//HTML标签反转义（  < ----> < ）   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 属性，这时获取到的就是转义后文本内容。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//HTML标签转义（< -> <）   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) 获取转义前的文本内容。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

　　方法三：使用 jQuery 进行转换
1，HTML 标签的转义方法

?

1 2 3 4 5 6 7

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

　　2，HTML 标签的反转义方法

?

1 2 3 4 5 6 7

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