// 字符串反转义
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值)
}
简单说一下业务场景，前台用户通过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>123&456</b></p>"
console.log(HTMLEncode(tagText))//<p><b>123&456</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>123&456</b></p>"
var
encodeText
=
HTMLEncode(tagText)
console.log(encodeText)//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText))
//<p><b>123&456</b></p>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
Html中特殊字符不被转义，可以使用预格式化标签。pre 是 Preformatted text（预格式化文本） 的缩写。使用此标签可以把代码中的空格和换行直接显示到页面上。例如HTML代码：<pre> if (xx >5) { print "比5大！\n" } </pre>
浏览器显示效果：if (xx >5) {print "比5大！\n"}<textarea></textarea>之间包含有类似的这种转义字符的时候总会被解析，倒是可以把所有的"&"通过程序替换成"&"，但是有些本来就是"&"的也会被转换，这就错了。如何让<textarea></textarea>之间包含的文本原封不动的显示出来呢？总结如下:解决方法有两种：第1种：
<body><textarea id='t' rows=20 cols=20></textarea><script>document.getElementById('t').innerText='a<&>'</script></body>
第2种：/*将字串转为html格式*/
public String strToHtml(String s) { if (s==null||s.equals("")) return "" s = s.replaceAll("&", "&") s = s.replaceAll("<", "<") s = s.replaceAll(">", ">") s = s.replaceAll(" ", " ") // s = s.replaceAll("/n", "") // s = s.replaceAll("'", "'") return s } /*将html格式转为字串*/ public String strToHtml(String s) { if (s==null||s.equals("")) return "" s = s.replaceAll("&","&") s = s.replaceAll("<","<") s = s.replaceAll(">",">") s = s.replaceAll(" "," ") //s = s.replaceAll("","/n") //s = s.replaceAll("'","'") return s }
最后一点：jQuery的.html()方法默认会转义的，这种情况使用.text()就不会转义了。
