Chrome Console 應用實戰第二發，用 jQuery 取出外部 HTML 有價值資料，像取外部 JSON 與 XML 資料一樣簡單

此課題較為進階請耐心看完，有修正建議請多多指教～謝謝大家！

我們知道流行的資料交換格式就是 json 跟 xml，但是 html 裡面也有寶貴資料可以擷取，我們可以利用

$.post("你想解取資料的網址",function(raw){ // 回傳 raw 是 html 網頁資料, 不是 json 與 xml
  var jqHTML = $($.parseHTML(raw)); // 解析 html 並轉成 jQuery 物件
  var jqHTML.find("css selector").xxx; // 取得想要資料片段
})

來針對結構複雜的 html 網頁資料建立 jQuery 物件並用 css selector 找到我們要的指定資料。

★接觸此範例前建議先閱讀上一篇文章 Chrome Console 應用實戰，用 jQuery 批量下載正妹圖

我們正式進入主題 -
請先到作者朋友網站 http://facemood.grtimed.com/

開新視窗連結到 http://facemood.grtimed.com/?view=facemood&tid=1&page=1，請不要把首頁關掉，等下要切換回去
檢視面板找到 div class="xxx" data-f-text="(*ﾟ∀ﾟ*)"，我想要擷取此畫面所有顏文字字串

回到首頁 http://facemood.grtimed.com/ 的頁面動態載入 jQuery
(不了解請先看之前範例了解如何製作動態載入jQuery的標籤)

打開 Console 貼上下面程式

$.post("http://facemood.grtimed.com/?view=facemood&tid=1&page=1",function(raw){
 // 將載入 HTML 解析並轉化成jQuery物件，all_emoji儲存所有顏文字
 var html = $($.parseHTML(raw)),all_emoji=[];
 // 取得指定標籤顏文字
 var emoji = html.find("div[data-f-text]");
 // 將所有顏文字存到 all_emoji 陣列
 emoji.each(function(){all_emoji.push($.trim($(this).html()));});
 // 清空畫面，輸出 all_emoji 陣列轉字串資料
 document.write(all_emoji.join(","));
})

輸出結果如下，我在網站首頁讀取其它頁面資料並輸出

你是否有能力靠程式擷取網站所有顏文字呢？請自行練習tid=x&page=y，x,y為變數，遞迴函示跑資料。作者擷取資料成功範例，抓到近550筆顏文字，下方為擷取成果