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

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

时间： 2024-10-15 13:51:09

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

通过微信分享链接，后面会被加上from=singlemessage&amp;isappinstalled=1可能导致网页打不开

微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈   from=timeline&isappinstalled=0 微信群   from=groupmessage&isappinstalled=0 好友分享 from=singlemessage&isappinstalled=0    项目中,由于请求后台数据的网址中的一部分是通过浏览器地址栏数据获得的, 获得此数据的处理过程没有考虑会被微信加参数的问题,因此得到的数据不正确, 导致网页无法访问. 弄了好久才找到这个原因,

JavaScript正则表达式-字符

JavaScript正则表达式字符包括两类: 1.普通字符. 2.转义字符. 普通字符 大小写字母.数字.其他任何符号. 转义字符 转义字符 含义 \f 换页符 \n 换行符 \r 回车符 \t 制表符 \b 退格符 \o 空字符 \xnn 由十六进制数nn指定的ASCII码对应的字符 \uxxx 由十六进制数xxxx指定的Unicode字符 \\ 反斜线 ^ 要匹配"^"字符本身需要使用"\^" $ 要匹配"$"字符本身需要使用"\$

JavaScript正则表达式-字符类

JavaScript正则表达式字符类包括六种: 1.字符列表. 2.反向列表. 3.字符范围. 4.反向范围. 5.组合类. 6.预定义类. 字符列表 在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的.每次匹配只能匹配列表中的一个字符. str = "bird,head,fed,meadow,3d"; reg_pattern = /[rea3s]d/g; arr_m = str.match(reg_pattern);//arr_m = [&quo

javascript 正则表达式字符含义基础解释

字符 含意 ^   匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a" $   匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A" *   匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa +   匹配前面元字符1次或多次,/ba+/将匹配ba,baa,baaa ?   匹配前面元字符0次或1次,/ba?/将匹配b,ba |   代表或者的意思 (x)   匹配x

JavaScript实现向右伸出的多级网页菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Oracle中使用escape关键字实现like匹配特殊字符，以及&字符的转义

转:http://blog.chinaunix.net/uid-26896647-id-3433968.html 问题描述:如果在一个表中的一个字段上存在'&',  '_',  '%'这样的特殊字符,而我们又得在where条件中使用到这些特殊字符怎么办? 1.创建含有这些特殊字符的表 SQL> create table t_test_escape(name varchar2(20)); Table created SQL> insert into t_test_escape(name)

网站导致浏览器崩溃的原因总结(多款浏览器)

面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

网页图片宽度和高度自适应的方法

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多,主要又两种: 第一种是使用CSS来完成:第二种是使用Javascript来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,笔者是指使用效果上有点恼人,本文专门把这两种都总结一下,方便站长们参考使用. 一.使用CSS实现图片

HTML兼容性 不声明doctype，IE9标准模式下position:fixed定位失败，导致遮罩层（Mask Layer）显示在页面最下方，FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9