【JavaScript】某些字符不转义可以导致网页崩溃与涉及转义字符的显示方法

来源：互联网发布：beyond compare4.2mac 编辑：程序博客网时间：2024/05/22 05:29

前端开发工作中，经常需要将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工程，你只好将半角转成全角咯。

0 0