实现HTML标签的转义、反转义的几种方法
原文链接:https://blog.csdn.net/huanggang0101/article/details/99621029
方法一:通过正则表达式进行替换
1,HTML 标签的转义方法
//HTML标签转义( < -----> <) function html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g,function(c){ return {'<':'<','>':'>','&':'&','"':'"'}[c]; }); }
2,HTML 标签的反转义方法
//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 属性,这时获取到的就是转义后文本内容。
//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) 获取转义前的文本内容。
//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 标签的转义方法
//HTML标签转义(< -> <) function html2Escape(sHtml) { return $("<div/>").text(sHtml).html(); }
2,HTML 标签的反转义方法
//HTML标签反转义(< -> <) function escape2Html(str) { return $("<div/>").html(str).text(); }