在編寫 html 時,為使其代碼可以在頁面上正常的顯示。我們需要對其進行轉義操作,這樣也可以在一定的程度上避免的 XSS 攻擊!這篇博文就簡單的介紹一下利用 JS 對 HTML 代碼進行轉義與反轉義的方法。

js replace 方法

国产视频app在講解 js 如何轉義 html 代碼,先說一說 js 方法。因為下面要用得到,先了解一下。

replace():對一串字符串中指定的部或符合正則表達式的部份字符串進行替換!

語法:

strobj.replace(regexp/substr,replacement)

參數:

regexp/substr:必需。規定的字符串或正規表達式

replacement:必需。替換的字符串或一個生成字符串的函數

示例:

<script>
var str = "hello mochu!"
console.log(str.replace(/mochu/, "feiniaomy.com")); // hello feiniaomy.com!
</script>

js 使用正規對 html 進行轉義的方法

示例1:

<script>
var value = document.getElementById('input').value.trim();
//對用戶輸入的內容進行轉義
value = value.replace(/&/g, "&amp;");
value = value.replace(/</g, "&lt;");
value = value.replace(/>/g, "&gt;");
value = value.replace(/ /g, "&nbsp;");
value = value.replace(/"/g, '&quot;');
console.log(value);
</script>

示例2:

<script>
var text = document.getElementById('input').value.trim();
text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');
console.log(text);
</script>

js 使用正規還原被轉義后的 html 代碼的方法

示例1:

<script>
var value = '被轉義后的html代碼內容';
value = value.replace(/&amp;/g, "&");
value = value.replace(/&lt;/g, "<");
value = value.replace(/&gt;/g, ">");
value = value.replace(/&nbsp;/g, " ");
value = value.replace(/&quot/g, "'");
console.log(value);
</script>

示例2:

<script>
var text = '被轉義后的html代碼內容';
text.replace('&', /&/g).replace('"', /\"/g).replace('<', /</g).replace('>', />/g);
console.log(text);
</script>

js 對 html 轉義與反轉義的方法集合

示例代碼:

<script>
var HtmlUtil = {
        /*1.用瀏覽器內部轉換器實現html轉碼*/
        htmlEncode:function (html){
            //1.首先動態創建一個容器標簽元素,如DIV
            var temp = document.createElement ("div");
            //2.然后將要轉換的字符串設置為這個元素的innerText(ie支持)或者textContent(火狐,google支持)
            (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
            //3.最后返回這個元素的innerHTML,即得到經過HTML編碼轉換的字符串了
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
        /*2.用瀏覽器內部轉換器實現html解碼*/
        htmlDecode:function (text){
            //1.首先動態創建一個容器標簽元素,如DIV
            var temp = document.createElement("div");
            //2.然后將要轉換的字符串設置為這個元素的innerHTML(ie,火狐,google都支持)
            temp.innerHTML = text;
            //3.最后返回這個元素的innerText(ie支持)或者textContent(火狐,google支持),即得到經過HTML解碼的字符串了。
            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>

方法調用:

<script>
var value = document.getElementById('input').value.trim();
console.log(HtmlUtil.htmlEncodeByRegExp(value));
</script>