南順網絡
javascript對HTML字符轉義與反轉義
1.背景：在項目中，經常遇到一(yī)些字符需要進行轉義後才能顯示到界面上，如(rú)“&”，在界面中顯示的(de)是“&”，在html中書寫“&”，顯示在界面的(de)中的(de)依然是“&”。
這時候，就需要進行轉義
2.解決方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <script>var HtmlUtil = { /*1.用浏覽器內(nèi)部轉換器實現html轉碼*/ htmlEncode:function (html){ //1.首先動态創建一(yī)個容器标簽元素，如(rú)DIV var temp = document.createElement ("div"); //2.然後将要轉換的(de)字符串設置為(wèi)這個元素的(de)innerText(ie支持)或者textContent(火狐，google支持) (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html); //3.最後返回這個元素的(de)innerHTML，即得到經過HTML編碼轉換的(de)字符串了 var output = temp.innerHTML; temp = null; return output; }, /*2.用浏覽器內(nèi)部轉換器實現html解碼*/ htmlDecode:function (text){ //1.首先動态創建一(yī)個容器标簽元素，如(rú)DIV var temp = document.createElement("div"); //2.然後将要轉換的(de)字符串設置為(wèi)這個元素的(de)innerHTML(ie，火狐，google都支持) temp.innerHTML = text; //3.最後返回這個元素的(de)innerText(ie支持)或者textContent(火狐，google支持)，即得到經過HTML解碼的(de)字符串了。 var output = temp.innerText || temp.textContent; temp = null; return output; }, /*3.用正則表達式實現html轉碼*/ htmlEncodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&/g,"&"); s = s.replace(/</g,"<"); s = s.replace(/>/g,">"); s = s.replace(/ /g," "); s = s.replace(/\'/g,"'"); s = s.replace(/\"/g,"""); return s; }, /*4.用正則表達式實現html解碼*/ htmlDecodeByRegExp:function (str){ var s = ""; if(str.length == 0) return ""; s = str.replace(/&/g,"&"); s = s.replace(/</g,"<"); s = s.replace(/>/g,">"); s = s.replace(/ /g," "); s = s.replace(/'/g,"\'"); s = s.replace(/"/g,"\""); return s; } };</script> |
使用方法：HtmlUtil.htmlDecodeByRegExp("&")
PS:使用正則
使用正則轉碼：
1 2 3 4 5 6 7 | var value = document.getElementById('input').value.trim(); //對用戶輸入進行轉義 value = value.replace(/&/g,"&"); value = value.replace(/</g,"<"); value = value.replace(/>/g,">"); value = value.replace(/ /g," "); value = value.replace(/"/g,'"'); |
使用正則解碼：
1 2 3 4 5 6 7 | var value = e.target.innerText; // value = decodeURIComponent(value); value = value.replace(/&/g,"&"); value = value.replace(/</g,"<"); value = value.replace(/>/g,">"); value = value.replace(/ /g," "); value = value.replace(/"/g,"'"); |
編輯:--ns868
