在如何用 Nodejs 分析一個簡單頁面一文中，我們爬取了博客園首頁的 20 篇文章標(biāo)題，輸出部分拼接了一個字符串：
var$ = cheerio.load(sres.text);varans =''; $('.titlelnk').each(function(index, item){var$item = $(item); ans += $item.html() +'
'; });// 將內(nèi)容呈現(xiàn)到頁面res.send(ans);
頁面呈現(xiàn)良好：
但是查看網(wǎng)頁源代碼，卻看到這樣的情景：
什么鬼豺妓？我們讓問題再清晰些阀坏，試著把爬蟲代碼稍做修改：
var$ = cheerio.load(sres.text);varans = []; $('.titlelnk').each(function(index, item){var$item = $(item); ans.push($item.html()); });// 將內(nèi)容呈現(xiàn)到頁面res.send(ans);
這輸出的是什么玩意兒？
亂碼赔退？不，是 HTML 實(shí)體編碼证舟！
HTML 實(shí)體編碼
在 HTML 中硕旗，某些字符是預(yù)留的，比如不能使用小于號（<）和大于號（>）女责，這是因?yàn)闉g覽器會誤認(rèn)為它們是標(biāo)簽漆枚。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）抵知。當(dāng)然還另一個重要原因墙基，有些字符在 ASCII 字符集中沒有定義，因此需要使用字符實(shí)體來表示刷喜，比如中文残制。
字符實(shí)體類似這樣：
&entity_name; 或者 &#entity_number;
如需顯示小于號，我們必須這樣寫：<或<掖疮。前者（實(shí)體名）易于記憶初茶，而后者（實(shí)體數(shù)字）在瀏覽器中的支持較好。
HTML 中常見的需要替換成字符實(shí)體的字符有 4 個浊闪，分別是<恼布、>螺戳、&以及"。為此折汞，我們可以簡單寫個 escapeHTML 函數(shù)（使得網(wǎng)頁上可以正確顯示這 4 個字符倔幼，而不會被誤認(rèn)為是標(biāo)簽）：
functionescapeHTML(text){varreplacements= {"<":"<",">":">","&":"&",""": """}; return text.replace(/[<>&"]/g,function(character){returnreplacements[character]; }); }
更多關(guān)于 HTML 實(shí)體編碼的內(nèi)容可以參考HTML 字符實(shí)體
Solution
不僅是 "<" ">" 這樣的能編碼，所有字符均能編碼字支，這也是出現(xiàn) "亂碼" 的原因凤藏。在文章開頭的例子中，其實(shí)它把該 target 標(biāo)簽內(nèi)的所有東西（包括中文）都給編碼了堕伪。
而最開始的代碼（字符串輸出）之所以沒有 "亂碼"揖庄，完全是因?yàn)闉g覽器自動幫你解碼了。（如果存在于 HTML 代碼中欠雌，會被自動解碼）
知道了原因蹄梢，我們可以從兩個方向解決問題。
首先富俄，我們可以不對其內(nèi)容進(jìn)行編碼禁炒。用text()方法取代html()方法：
$('.titlelnk').each(function(index, item){var$item = $(item); ans.push($item.text()); });
很簡單并且完美地解決了這個問題。
或者我們關(guān)閉 cheerio 中的.html()方法 轉(zhuǎn)換實(shí)體編碼的功能（2016-01-25 add）：
var$ = cheerio.load(sres.text, {decodeEntities:false}); $('.titlelnk').each(function(index, item){var$item = $(item);console.log($item.html()); });
如果說不能從編碼的角度解決霍比，我們可以試著解碼幕袱。
方法一：
創(chuàng)建空標(biāo)簽，將編碼內(nèi)容用 html() 方法塞入悠瞬，用 text() 取出们豌，轉(zhuǎn)換過程讓第三方完成（當(dāng)然前提是獲取了 $ 對象）：
functionhtmlDecode(str){vart = $("
"); t.html(str);returnt.text(); }var$ = cheerio.load(sres.text);varans = []; $('.titlelnk').each(function(index, item){var$item = $(item); ans.push(htmlDecode($item.html())); });// 將內(nèi)容呈現(xiàn)到頁面res.send(ans);方法二：
根據(jù)編碼轉(zhuǎn)換規(guī)則，用正則 decode：
functionhtmlDecode(str){// 一般可以先轉(zhuǎn)換為標(biāo)準(zhǔn) unicode 格式（有需要就添加：當(dāng)返回的數(shù)據(jù)呈現(xiàn)太多\\\u 之類的時）str =unescape(str.replace(/\\u/g,"%u"));// 再對實(shí)體符進(jìn)行轉(zhuǎn)義// 有 x 則表示是16進(jìn)制浅妆，$1 就是匹配是否有 x望迎，$2 就是匹配出的第二個括號捕獲到的內(nèi)容，將 $2 以對應(yīng)進(jìn)制表示轉(zhuǎn)換str = str.replace(/&#(x)?(\w+);/g,function($, $1, $2){returnString.fromCharCode(parseInt($2, $1?16:10)); });returnstr; }var$ = cheerio.load(sres.text);varans = []; $('.titlelnk').each(function(index, item){var$item = $(item); ans.push(htmlDecode($item.html())); });// 將內(nèi)容呈現(xiàn)到頁面res.send(ans);
Encode & Decode
事情到此似乎可以告一段落凌外，我們找到了問題的原因辩尊，也找到了解決辦法。但是康辑，HTML 實(shí)體編碼摄欲，它到底是如何編碼的？
我們?nèi)我馊∫粭l標(biāo)題：
前端備忘錄 — IE 的條件注釋
編碼后為：
前端備忘錄 —IE的條件注釋
中文的編碼結(jié)果開頭都是 &#x疮薇。試著用charCodeAt()取得 "前" 字的 unicode 編碼大小蒿涎，然后將它轉(zhuǎn)成 16 進(jìn)制，正是 524d 惦辛！看來和escape()相似，又是一次十六進(jìn)制的轉(zhuǎn)換仓手。
但是英文卻沒有被轉(zhuǎn)胖齐，這點(diǎn)和 escape() 也神似玻淑。唯一不同的是 escape 會將空格轉(zhuǎn)為%20，而 HTML 編碼并沒有呀伙。
而且 HTML 編碼甚至?xí)?自動編碼成?补履，這也就意味著如果要手寫個 HTML 編碼函數(shù)，需要將所有字符實(shí)體的映射都找出來剿另，而且對于 &XXXX 形式的箫锤，似乎還要作個校驗(yàn)（確認(rèn)是實(shí)體集還是普通的字符串）。
而 HTML 解碼則相對來說簡單寫雨女，只需將 &#xXXX 進(jìn)行轉(zhuǎn)換谚攒，詳細(xì)代碼可以參考 Solution 一節(jié)的正則。
事實(shí)上氛堕，HTML 編碼并不一定要轉(zhuǎn)成十六進(jìn)制馏臭，十進(jìn)制也可以。還是以 "前" 為例讼稚，它的十進(jìn)制 unicode 碼為 21069括儒，完全可以用前來代替前。
最后還有兩個客戶端的編碼锐想、解碼函數(shù)：
functionHtmlEncode(str){vart =document.createElement("div"); t.textContent ? t.textContent = str : t.innerText = str;returnt.innerHTML; }functionHtmlDecode(str){vart =document.createElement("div"); t.innerHTML = str;returnt.textContent || t.innerText; }
真的是吃一塹長一智帮寻，以后碰到 "&#x" 開頭的一些編碼，十有八九是 HTML 的實(shí)體編碼赠摇，再也不用擔(dān)心了固逗！
