山水山水，有山有水才是好风光。夜色越来越浓了，村落啦，树林子啦，坑洼啦，沟渠啦，好象一下子全都掉进了神秘的沉寂里。
在编写 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, "&");
value = value.replace(/</g, "<");
value = value.replace(/>/g, ">");
value = value.replace(/ /g, " ");
value = value.replace(/"/g, '"');
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(/&/g, "&"); value = value.replace(/</g, "<"); value = value.replace(/>/g, ">"); value = value.replace(/ /g, " "); value = value.replace(/"/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> 到此这篇关于javascript 对 html 字符转义与反转义的方法就介绍到这了。青春——人的一生中最美好年岁。它是一个人的生命含苞待放的时期，生机勃发朝气蓬勃；它意味着进取，意味着上升，蕴含着巨大希望的未知数。更多相关javascript 对 html 字符转义与反转义的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
