在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