最近开发中涉及到有关输出正确的HTML标签这样的问题，正好对字符编码这块儿多看看，之前对这个方面认识的不深，思考的确实不够，如果下次再碰见类似的问题，若再次不少时间去调研的花，就得不偿失了。
就像正则表达式一样，似乎你知道它，但是每一次开发都需要现取查、现取测试，估计你会像我一样，每一次都会花些意想不到的时间。
总之，重在学习。
有一篇文章，这个博友已经总结的非常到位了，引入于此，看到的同学，希望可以多看看他做的总结：
在web的开发的开发过程中，前端总是在处理后端打的各种变量，变量可以包含着中的各种各样的字符，如果不对这些字符进行”特殊“处理的话，轻者导致页面不正常的显示，潜入了其他的东西，亦即页面挂了，或者弹出不应该弹出的东西，这些都是我们不期望看到的，重者可能导致密码泄露，网站的访问量突然猛增，服务器挂掉。
在前端的开发中，涉及到以下几种语境：
1）直接显示在页面上， eg：<div>{%username%}</div>,<input type=”text” value=”{%username%}”/>
2）在script 标签中，eg ：<script>var test = ‘{%username%}’;var test=”{%username%}”</script>
3）在页面事件中，eg:<div onclick=”alert(‘{%username%}’)”>334455</div>
4）在innerHTML 的语境中，eg:<div id=”test”></div> <script>var test=”{%username%}”;document.getElementById(‘test’).innerHTML =test; </script>
5）在页面链接的url中：eg：<a href=”{%username%}”></a>
6）提交url参数处理
7）js 获取url参数值的时候
下面来一个一个的分析上面提到了7种语境中的转义情况：
1）直接显示在页面上（简称页面html环境中）：
为了保证用户的本意，完完全全的展示在页面上，这类主要是防止标签的自闭合，属性中的单引号，双引号已经存在的情况下不正确显示，所以必须转义4个字符：<,>,”,’ to为转义的意思（下同）
（1）< to <
（2） > to >
（3）” to "；
（4）’ to '；
2）在script的标签中（简称js环境中）：
在javascript 中 ” 和’ 都是表示字符串，没有任何区别，所以如果变量中出现了这2个字符，就会影响后面不正确显示，所以必须转义这2个字符 ，同理，如果变量中包含\ 会将后面的’或者“给转义掉，
变成真正的’和”，也没有闭合，导致语法错误，所以这个字符也需要转义，另外在我们的注释中存在/* */ 这种形式，如果在变量中出现了 */这种字符，就会将注释掉的部分代码给暴漏出来，所以也要转义/字符，
综上所述，在script标签中要转义的字符为：
（1）’ to \’
（2）” to \”
（3）\ to \\
（4）/ to \/
3）在页面事件中：
这类语境涉及到了页面html和Js 环境，要执行什么转义呢？到底是先html 在js，还是先js 再html 转义呢？我们来看一个例子：
eg：<div onclick=”alert(‘{%username%}’)”></div>
当username = ” 的时候，如果是先html ，然后再js 转义的时候，那么就是<div onlick=”alert(‘&qout;’)”></div> 我们拿到页面上去执行，发现语法报错
如果是先js，先后在html转义的时候，那么就是<div onlick=”alert(‘\&qout;’)”></div> 我们拿到页面上去执行，成功！！
所以结论是 先进行JS 转义，然后再进行html 转义，为什么是这样呢？因为这里它是要执行一个js函数的，如果都当做html来解析了，这里的js函数就不会执行，也就没有js 环境的意思了。
综上所述，在这累语境中需要转义的字符为：
（1）’ to \&
（2）” to \"
（3）\ to \\
（4）/ to \/
（5）< to <
（6）< to >
4） 在innerHTML环境中：
这类语境首先是js环境中，其次是在html环境中，显然，先进行js转义，然后再进行html转义，需要转义的字符同上述3）
5）在页面链接的url 环境中：
这类比较复杂，url中本身涉及到很多的特殊字符，此外也会涉及到html 和js 环境中的赋值的情况，特别注意，url 编码和html的编码是不一样的，见后文附录url编码表和html编码表
在html 和js环境中，需要转义的字符为： ” ，’ ，<，>，\ ，/
在其他环境中，需要转义的字符为：+，空格，？，=，&，#， %
这类字符的转义如下：
（1）” to %22;
（2）’ to %22;
（3） < to %3C
（4） > to %3E
（5） \ to %5C
（6） / to %2F
（7） + to %2b
（8）空格 to %20
（9）？ to %3F
（10）= to %3D
（11）& to %26
（12）# to 23
（13） % to %25
为什么要转义这些字符呢？稍微web开发的经验同学就知道，原因很简单，如果存在这些字符的话，不进行转义，那么我们就会得不到我们应该得到的东西
引申一点：在我们拼接url的时候，比如将表单中的数据提取出来，用ajax的方式提交的时候，也需要对上述字符进行转义，不然得到的也不是想到的东西
6）提交url 参数的处理：
1） Form 表单提交方式：不需要做任何处理，表单会依照页面的编码进行编码
2） ajax 的提交：因为ajax的提交的时候，是拼接成url的方式提交给后端的，所以必须要考虑对 +，空格，？，=，&，#， % 的转义，通常使用 encodeURIComponent进行转义
关于escape,encodeURI,encodeURIComponent 这三个函数的需要的转义字符，见后面的附件列表
7） js 获取url参数的值的时候
（1） 得到url中的参数值的时候，首先必须要进行unescape的转码才能使用，因为url中的一些特殊字符都经过了编码
（2） 将url的值设置到一些参数上时，比如隐藏表单上的value值的时候（作提交refer），需要进行escape 编码
附录：
1）html 编码：http://wenku.baidu.com/view/0dbaa1dc7f1922791688e8a2.html
2）url 编码：http://baike.baidu.com/view/204662.htm
3）escape,encodeURI,encodeURIComponent 的区别：http://www.alixixi.com/web/a/2008081147930.shtml
我概要一下，分为两类，模板（或称为显示）相关，另一类是URL相关；
一、模板（显示）相关：
我们要把不确定性的后端文本变量（当然来自绝大部分来自用户的输入），为了让之正确的显示在页面中（也就是HTML中），或者正确的执行js代码，我们要对特殊字符进行转义：
HTML环境：
JS环境：
对应的工具函数如：
二、URL相关：
主要涉及3个可以对字符串编码的函数，分别是：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。
相应的函数介绍，主要查看js api文档即可。
这里做了个统计表格
根据上面的表格，我们再来分析使用场景：
1. 当js使用数据时可以使用escape，比如获取或者设置URL中的参数值的时候（当然，约定该URL中传递的参数是经过unicode编码的）
2. 进行url跳转时可以整体使用encodeURI。如——
3.传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。如——
弄清escape、encodeURI、encodeURIComponent的内容，量并不小，需要耐心去理解、去实践。
参考：
原文链接：https://www.cnblogs.com/jinguangguo/p/4775448.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/18130
