在编写 html 时,为使其代码可以在页面上正常的显示。我们需要对其进行转义操作,这样也可以在一定的程度上避免的 XSS 攻击!这篇博文就简单的介绍一下利用 JS 对 HTML 代码进行转义与反转义的方法。

js replace 方法

在讲解 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>