JS Html轉義和反轉義（html編碼和解碼）的實現(xiàn)與使用方法總結
更新時間：2020年03月10日 14:48:39 作者：willingtolove
這篇文章主要介紹了JS Html轉義和反轉義（html編碼和解碼）的實現(xiàn)與使用方法,結合實例形式總結分析了JS Html轉義和反轉義、html編碼和解碼相關封裝類定義與具體使用技巧,需要的朋友可以參考下
本文實例講述了JS Html轉義和反轉義（html編碼和解碼）的實現(xiàn)與使用方法。分享給大家供大家參考，具體如下：
1、JS實現(xiàn)html轉義和反轉義主要有兩種方式：
1）、利用用瀏覽器內部轉換器實現(xiàn)html轉義；
2）、用正則表達式實現(xiàn)html轉義；
2、封裝的JS工具類：
var HtmlUtil = {
/*1.用瀏覽器內部轉換器實現(xiàn)html編碼（轉義）*/
htmlEncode:function (html){
//1.首先動態(tài)創(chuàng)建一個容器標簽元素，如DIV
var temp = document.createElement ("div");
//2.然后將要轉換的字符串設置為這個元素的innerText或者textContent
(temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
//3.最后返回這個元素的innerHTML，即得到經(jīng)過HTML編碼轉換的字符串了
var output = temp.innerHTML;
temp = null;
return output;
},
/*2.用瀏覽器內部轉換器實現(xiàn)html解碼（反轉義）*/
htmlDecode:function (text){
//1.首先動態(tài)創(chuàng)建一個容器標簽元素，如DIV
var temp = document.createElement("div");
//2.然后將要轉換的字符串設置為這個元素的innerHTML(ie，火狐，google都支持)
temp.innerHTML = text;
//3.最后返回這個元素的innerText或者textContent，即得到經(jīng)過HTML解碼的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*3.用正則表達式實現(xiàn)html編碼（轉義）*/
htmlEncodeByRegExp:function (str){
var temp = "";
if(str.length == 0) return "";
temp = str.replace(/&/g,"&");
temp = temp.replace(/</g,"<");
temp = temp.replace(/>/g,">");
temp = temp.replace(/\s/g," ");
temp = temp.replace(/\'/g,"'");
temp = temp.replace(/\"/g,""");
return temp;
},
/*4.用正則表達式實現(xiàn)html解碼（反轉義）*/
htmlDecodeByRegExp:function (str){
var temp = "";
if(str.length == 0) return "";
temp = str.replace(/&/g,"&");
temp = temp.replace(/</g,"<");
temp = temp.replace(/>/g,">");
temp = temp.replace(/ /g," ");
temp = temp.replace(/'/g,"\'");
temp = temp.replace(/"/g,"\"");
return temp;
},
/*5.用正則表達式實現(xiàn)html編碼（轉義）（另一種寫法）*/
html2Escape:function(sHtml) {
return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
},
/*6.用正則表達式實現(xiàn)html解碼（反轉義）（另一種寫法）*/
escape2Html:function (str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
};
3、測試及效果：
1）、html代碼：
<div>&</div> <div>&</div> <div id="testdiv"></div> <div id="testdiv1"></div> <div id="testdiv2"></div> <div id="regdiv"></div> <div id="regdiv1"></div> <div id="regdiv2"></div> <div id="regdiv3"></div> <div id="regdiv4"></div> <div id="regdiv5"></div>
2）、js測試代碼：
var strHtml='<div style="color:blue">符號：&<div>';
document.getElementById("testdiv").innerHTML=strHtml;
var encodedHtml= HtmlUtil.htmlEncode(strHtml);// "<div style="color:blue">符號：&amp;<div>"
document.getElementById("testdiv1").innerHTML=encodedHtml;
var decodedHtml=HtmlUtil.htmlDecode(encodedHtml);// '<div style="color:blue">符號：&<div>'
document.getElementById("testdiv2").innerHTML=decodedHtml;
var strHtml_1='<div style="color:red">符號：&<div>';
document.getElementById("regdiv").innerHTML=strHtml_1;
var encodedHtml_1 =HtmlUtil.htmlEncodeByRegExp(strHtml_1);// "<div style="color:red">符號：&amp;<div>"
document.getElementById("regdiv1").innerHTML=encodedHtml_1;
var decodedHtml_1 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_1);// '<div style="color:blue">符號：&<div>'
document.getElementById("regdiv2").innerHTML=decodedHtml_1;
var strHtml_2='<div style="color:green">符號：&<div>';
document.getElementById("regdiv3").innerHTML=strHtml_2;
var encodedHtml_2 =HtmlUtil.htmlEncodeByRegExp(strHtml_2);// "<div style="color:green">符號：&amp;<div>"
document.getElementById("regdiv4").innerHTML=encodedHtml_2;
var decodedHtml_2 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_2);// '<div style="color:green">符號：&<div>'
document.getElementById("regdiv5").innerHTML=decodedHtml_2;
3）、效果圖：
4、其他的一些處理html字符串的常用方法
1）、去掉字符串中的html標簽
function removeHtmlTab(tab) {
return tab.replace(/<[^<>]+?>/g,'');//刪除所有HTML標簽
}
removeHtmlTab('<div id="test">zyl</div><span>zzc</span>');// zylzzc
2）、回車\r\n轉為<br/>標簽
function return2Br(str) {
return str.replace(/\r?\n/g,"<br />");
}
3）、去除開頭結尾換行,并將連續(xù)3次以上換行轉換成2次換行
function trimBr(str) {
str=str.replace(/((\s| )*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次換行
str=str.replace(/^((\s| )*\r?\n)+/g,'');//清除開頭換行
str=str.replace(/((\s| )*\r?\n)+$/g,'');//清除結尾換行
return str;
}
4）、將多個連續(xù)空格合并成一個空格
function mergeSpace(str) {
str=str.replace(/(\s| )+/g,' ');
return str;
}
PS：這里再為大家提供幾款相關工具供大家參考使用：
在線HTML轉義/反轉義工具：
http://tools.jb51.net/transcoding/html_transcode
Native/Unicode在線編碼轉換工具：
http://tools.jb51.net/transcoding/native2unicode
在線中文漢字/ASCII碼/Unicode編碼互相轉換工具：
http://tools.jb51.net/transcoding/chinese2unicode
更多關于JavaScript相關內容可查看本站專題：《javascript編碼操作技巧總結》、《JavaScript加密解密技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了在HTML中使用JavaScript的兩種方法，幫助大家更好的理解和制作網(wǎng)頁，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了JavaScript中獲取純正的undefined的方法的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了微信小程序之批量上傳并壓縮圖片的實例代碼,需要的朋友可以參考下2018-07-07
利用className得到對象的實現(xiàn)代碼，大家可以看下代碼的實現(xiàn)原理。2011-11-11
Object.keys()是遍歷一個對象自身的屬性名稱(不包括繼承屬性)的最簡單方法，這篇文章主要介紹了Object.keys()的用法,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了JS實現(xiàn)自動變化的導航菜單效果代碼,涉及JavaScript基于定時函數(shù)觸發(fā)頁面元素屬性動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會有Javascript初學者提出這樣的問題,自從js出現(xiàn)以來.2010-08-08
這篇文章主要為大家詳細介紹了微信小程序自定義單項選擇器樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
javascript跨域總結之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實現(xiàn)的跨域數(shù)據(jù)傳輸，自己親自實踐了一下，真的非常好用，特此分享到腳本之家網(wǎng)站供大家參考2015-11-11
這篇文章主要給大家介紹了關于uniapp實現(xiàn)app自動更新的詳細步驟,文中給出了詳細的代碼示例以及圖文教程,對大家學習或者使用uniapp具有一定的參考學習價值,需要的朋友可以參考下2023-08-08