方法一:通过正则表达式进行替换
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();
}