很多站长朋友们都不太清楚js对html反转义怎么用，今天小编就来给大家整理js对html反转义怎么用，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 Js中如何进行HTMLEncode? 2、 html转义/反转义 3、 JS实现HTML标签转义及反转义 4、 javascript怎么反转义字符串 5、 js如何转义和反转义html特殊字符 6、 js转换html的格式 Js中如何进行HTMLEncode?HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的，以下总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式
一、用浏览器内部转换器实现转换
1.1.用浏览器内部转换器实现html转码
首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)，最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了。
1.2.用浏览器内部转换器实现html解码
首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)，最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
var HtmlUtil = {
/*1.用正则表达式实现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;
},
/*2.用正则表达式实现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;
}
};
html转义/反转义// 字符串反转义
function enXssHtml(text) {
const matchList = {
"<": "<",
">": ">",
"": "",
"": '""',
""": '"',
"'": "'",
};
let regStr = "(" + Object.keys(matchList).toString() + ")";
// ↑ ------------【 提取匹配列表key值 】.【组数转字符串】
regStr = regStr.replace(/,/g, ")|(");
// ↑ 通过匹配将其更新为正则的字符串类型
const regExp = new RegExp(regStr, "g");
// ↑ ------- 字符串 转 正则 方法
return text.replace(regExp, (match) => matchList[match]);
// ↑ ------ 替换方法 (正则, 当前key => 返回当前被匹配的key值)
}
// 字符串反转义
function deXssHtml(text) {
const matchList = {
"<": "<",
">": ">",
"": "",
'"': '"',
'"': '"',
"'": "'",
};
let regStr = "(" + Object.keys(matchList).toString() + ")";
// ↑ ------------【 提取匹配列表key值 】.【组数转字符串】
regStr = regStr.replace(/,/g, ")|(");
// ↑ 通过匹配将其更新为正则的字符串类型
const regExp = new RegExp(regStr, "g");
// ↑ ------- 字符串 转 正则 方法
return text.replace(regExp, (match) => matchList[match]);
// ↑ ------ 替换方法 (正则, 当前key => 返回当前被匹配的key值)
}
JS实现HTML标签转义及反转义简单说一下业务场景，前台用户通过input输入内容，在离开焦点时，将内容在div中显示。
这时遇到一个问题，如果用户输入了html标签，则在div显示中，标签被解析。
由于是纯前端操作，不涉及后端，因此需要通过js对输入内容进行转义。
这里提供一个非常简单有效的转义方案，利用了innerHTML和innerText
注：火狐不支持innerText，需要使用
textContent
属性，而IE早期版本不支持此属性，为了同时兼容IE及火狐，需要进行判断操作.
因为innerText（textContent）会获取纯文本内容，忽略html节点标签，而innerHTML会显示标签内容，
所以我们先将需转义的内容赋值给innerText（textContent），再获取它的innerHTML属性，这时获取到的就是转义后文本内容。
代码如下：
function
HTMLEncode(html)
{
var
temp
=
document.createElement("div");
(temp.textContent
!=
null)
?
(temp.textContent
=
html)
:
(temp.innerText
=
html);
var
output
=
temp.innerHTML;
temp
=
null;
return
output;
}
var
tagText
=
"<p><b>123456</b></p>";
console.log(HTMLEncode(tagText));//<p><b>123456</b></p>
通过测试结果，可以看到html标签及符都被转义后保存。
同理，反转义的方法为先将转义文本赋值给innerHTML，然后通过innerText（textContent）获取转义前的文本内容
function
HTMLDecode(text)
{
var
temp
=
document.createElement("div");
temp.innerHTML
=
text;
var
output
=
temp.innerText
||
temp.textContent;
temp
=
null;
return
output;
}
var
tagText
=
"<p><b>123456</b></p>";
var
encodeText
=
HTMLEncode(tagText);
console.log(encodeText);//<p><b>123456</b></p>
console.log(HTMLDecode(encodeText));
//<p><b>123456</b></p>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
javascript怎么反转义字符串转移字符就是在特定的字符前加一个反斜杠 例如 ：\n 是换行的意思。 如果你不想让\n有转义符的作用， 就直接在前面多加一个‘\’，这样 \\n 就没有转移符的作用了， 会显示为文本 \n 。
希望对你有帮助， 谢谢
js如何转义和反转义html特殊字符js中的特殊字符，加上转义符\ 。
例如：
var txt="We are the so-called "Vikings" from the north." document.write(txt) 【错误】
var txt="We are the so-called \"Vikings\" from the north." document.write(txt) 【正确】
js转换html的格式方法如下：
1、在百度搜索 JS/HTML转换，会有很多在线转换网站；
2、随意找一个进去，默认进入是js转Html的状态；
3、将Js源代码粘贴到相应的空白栏处，当即转换完成。
关于js对html反转义怎么用的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于js对html反转义怎么用 js解析html转义字符的详细内容...