【JavaScript】某些字符不转义可以罗致网页崩溃与涉及转义字符的显示方法
【JavaScript】某些字符不转义可以导致网页崩溃与涉及转义字符的显示方法
这段代码的具体结构非常复杂，使用到正则表达式，我也很难理解其中的奥妙，但是你只要记住有需要的时候，在其中的映射表里面添加转义规则，显示的时候主要调用一下HTMLescape的方法，大家主要观察到对敏感的尖括号转义一下就OK了，比如如下的一段程序，我要在网页中的行内文本显示<div>a</div>显示不出来，但经过转义之后是可以的：
前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把<，>，＆等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是1、“<”和“>”等符号已经用来表示HTML TAG，因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号，所以需要定义它的转义字符串。2、有些字符在ASCII字符集中没有定义（如版权符号“©”）。因此需要使用转义字符（“©”对应的转义字符是“＆copy;”）来表示。
也就是说例如<div>a</div>直接在网页中是显示不出来的，必须经过转义之后才能够显示出来。如果不经过转义会给网页带来了很多的*，能够使网页崩溃。
如果<div>a直接在网页中显示，也就是说<div>a被直接放到一段HTML代码里面了，整个网页就断层了，HTML无法解释完全了。必须通过写成＆lt;div＆rt;a才能够在网页中正常显示。
比如以下的例子：
先看如下的代码，这个网页除了一个id为html的行内文本span就什么都没有，我本打算显示<div>a</div>的，但是稍有一些HTML知识的人都知道是显示不出来的，最终的显示结果是一个a：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text</title> </head> <body> <span id="html"><div>a</div></span> </body> </html>同时更可怕的还是这种情况：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text</title> </head> <body> <span id="html" style="color:#ff0000">a</span></body></html>a</span> <div>b</div> </body> </html>我本打算在id为html的行内文本span中显示a</span></body></html>a的，并设置其颜色为红色，但是运行出来的结果却是这样的：
只有一个a变成了红色，甚至有些浏览器根本就解析不出</html>之后的东西。
有些人还觉得这是小事，因为我们在HTML编程的时候，根本就不会这么无聊要显示</span></body></html>这些东西，但事实上，如果你到了Javascript编程的时候你注意到这个问题吗？
比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text</title>
</head>
<body>
<span id="html"></span>
</body>
</html>
<script>
var a="<div>a</div>";
document.getElementById("html").innerHTML=a;
</script>设置ID为html的行内文本的内容是<div>a</div>，虽然平时根本就不会这么写，但是，如果你给一个输入框给用户输入东西，然后把这个东西再重新显示出来，多见于评论系统，你能够保证用户不会输入<div>a</div>？因此，你要运用到转码函数：
var keys = Object.keys || function(obj) {
obj = Object(obj)
var arr = []
for (var a in obj) arr.push(a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a]] = a
return result
}
var entityMap = {
escape: {
'＆': '＆amp;',
'<': '＆lt;',
'>': '＆gt;',
'"': '＆quot;',
' ': '＆nbsp;',
/*如果你之后的WEB程序还涉及到文件名，文件的操作，比如导入导出功能，你最好还是在这个映射表中再添加以下的规则，把半角转成全角，否则可能出错
'\\' : '＼',
'/' : '／',
':' : '：',
'*' : '＊',
'?' : '？',
'|' : '｜',
*/
}
}
entityMap.unescape = invert(entityMap.escape);
var entityReg={
escape: RegExp('[' + keys(entityMap.escape).join('') + ']', 'g'),
unescape: RegExp('(' + keys(entityMap.unescape).join('|') + ')', 'g')
}
function HTMLescape(html) {
if (typeof html != 'string') return ''
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
function HTMLunescape(str) {
if (typeof str != 'string') return ''
return str.replace(entityReg.unescape, function(match) {
return entityMap.unescape[match]
})
}
这段代码的具体结构非常复杂，使用到正则表达式，我也很难理解其中的奥妙，但是你只要记住有需要的时候，在其中的映射表里面添加转义规则，显示的时候主要调用一下HTMLescape的方法，大家主要观察到对敏感的尖括号转义一下就OK了，比如如下的一段程序，我要在网页中的行内文本显示<div>a</div>显示不出来，但经过转义之后是可以的：
具体转义的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text</title>
</head>
<body>
<span id="html"></span>
</body>
</html>
<script>
//转义函数的开始
var keys = Object.keys || function(obj) {
obj = Object(obj)
var arr = []
for (var a in obj) arr.push(a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a]] = a
return result
}
var entityMap = {
escape: {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
' ': '＆nbsp;',
/*如果你之后的WEB程序还涉及到文件名，文件的操作，比如导入导出功能，你最好还是在这个映射表中再添加以下的规则，把半角转成全角，否则可能出错
'\\' : '＼',
'/' : '／',
':' : '：',
'*' : '＊',
'?' : '？',
'|' : '｜',
*/
}
}
entityMap.unescape = invert(entityMap.escape);
var entityReg={
escape: RegExp('[' + keys(entityMap.escape).join('') + ']', 'g'),
unescape: RegExp('(' + keys(entityMap.unescape).join('|') + ')', 'g')
}
function HTMLescape(html) {
if (typeof html != 'string') return ''
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
function HTMLunescape(str) {
if (typeof str != 'string') return ''
return str.replace(entityReg.unescape, function(match) {
return entityMap.unescape[match]
})
}
//转义函数的结束
var a="<div>a</div>";
document.getElementById("html").innerHTML=a;
alert(a);
//把转义之后的字符串，替代原来的字符串，再显示
a=HTMLescape(a);
alert(a);
document.getElementById("html").innerHTML=a;
</script>同时，由于现在的输入法越做越不保留原来的全角功能，觉得全角输入的字符比较丑，附上一种在word2007轻松转换半角、全角的方法：
另外附上HTML转义字符表，如果这个码没有，而且你这个字符也需要转义之后才能正常，或者这个字符有可能危害到你的WEB工程，你只好将半角转成全角咯。