HTML編碼、innerHTML、innerText與URL編碼

HTML編碼字符集

爲了讓瀏覽器知道頁面應該顯示什麼，必須要給頁面一個明確的字符集用於瀏覽器編碼解碼。通常，我們都用utf-8字符集。如<meta charset="UTF-8">來指定頁面所用的字符集。這樣一來，瀏覽器可以根據utf-8字符集來顯示內容。
點擊這裏先展示一下HTML特殊字符與字符實體對照表。

瀏覽器對HTML標籤內的特殊字符解析時，爲什麼直接寫特殊字符也行，寫特殊字符對應的字符實體也行？

innerHTML的用法或jQuery的html()

設置：innerHTML或html（arg：string）

在爲DOM節點的innerHTML賦值或jQuery對象調用html(arg: string)時，瀏覽器會對賦值的字符串（html()方法的字符串參數）進行解析，生成DOM樹，因此頁面標籤結構會變化（雖然從頁面外觀上可能看不出來）。

獲取：innerHTML或html()

在用DOM節點的innerHTML獲取值或調用html()不傳入參數時，瀏覽器會對該DOM節點下的DOM樹進行序列化後返回，序列化的過程中按如下兩個規則：

• DOM樹中的標籤節點不進行編碼，按原樣返回，甚至瀏覽器會判斷傳入的不完整標籤，自動補齊後按原樣返回；
• 其他特殊字符進行編碼（即特殊字符會轉換爲字符實體），將編碼後的字符串返回。

innerText的用法

設置：innerText或text（arg：string）

在爲DOM節點的innerText賦值或jQuery對象調用text(arg: string)時，瀏覽器不會對該賦值的字符串（或text()方法的參數字符串）進行解析，只是把該字符串作爲文本節點的值。

獲取：innerText或text（）

在用DOM節點的innerText獲取值或調用text()不傳入參數時，瀏覽器獲取該DOM節點下的文本節點值，直接返回，不進行任何序列化（即不會對特殊字符編碼）

一個用於escape字符串防止XSF攻擊的方法

function decodeHtml(str) {
	// 創建一個文檔片段;
	var div = document.createElement('div');
	// 將div元素的HTML內容設定爲str,該str會被瀏覽器解析爲文檔片段樹；
	div.innerHTML = str || '';
	// 返回div元素下的所有文本節點值，這樣避免了str裏面包含的標籤，因爲包含的標籤已經被上一步解析過了，innerText不會返回解析過的元素節點。
	return div.innerText;
}

URL編碼

默認採用UTF-8來編碼路徑部分和查詢字符串部分。IE瀏覽器可能查詢字符串部分採用了其他方式來編碼；