摘要：在日常文章數據統計的過程中純手動方式已經難以應付于是乎逐步開始了程序介入方式進行統計在上一節中探索利用文件格式進行文章數據統計本來以為能夠應付一陣子沒想到僅僅一天我就放棄了原因還不是因為我懶需要復制文章內容然后整理成特定的格式最后利用已編寫

在日常文章數據統計的過程中,純手動方式已經難以應付,于是乎,逐步開始了程序介入方式進行統計.

在上一節中,探索利用 csv 文件格式進行文章數據統計,本來以為能夠應付一陣子,沒想到僅僅一天我就放棄了.

原因還不是因為我懶,需要復制文章內容,然后整理成特定的 csv 格式,最后利用已編寫的 java 工具類進行統計.

在這三步操作中,第一步復制文章內容最簡單,第二步整理文章格式最麻煩,第三步編寫 csv 工具類最技術.

因此,能不能再簡單點?懶癌晚期,必須繼續尋求新的解決方案.

關于如何利用 csv 文件處理統計數據,可以參考 https://snowdreams1006.github.io/static-semi-manual-with-csv.html

慕課手記 : https://www.imooc.com/u/52244...

簡書 : https://www.jianshu.com/u/577...

博客園 : https://www.cnblogs.com/snowd...

騰訊云社區 : https://cloud.tencent.com/dev...

下面以 chrome 瀏覽器為例,說明如何利用默認控制臺抓取關鍵數據,本文需要一定的 jQuery 基礎.

在目標頁面右鍵選擇檢查選項,打開默認開發者控制臺,點擊最左側的小鼠標箭頭,然后選中關鍵數據,比如瀏覽量.

此時,開發者控制臺自動滾動到元素(Elements)選項卡,在目標數據上右鍵點擊復制(Copy),接著點擊復制選擇器(Copy selector),現在已經定位到閱讀量的節點.

點擊控制臺(Console)選項卡,并且將選擇器更改成 jQuery 選擇器,即$("復制的選擇器").text(),現在在控制臺直接輸出內容,看一下能否抓取到瀏覽量吧!

現在已經成功定位到指定元素,而我們要統計的是全部文章的閱讀量,因此需要定位到全部元素.

$("#articlesList > div:nth-child(1) > div.item-btm.clearfix > div > div:nth-child(1) > em").text();

簡單分析下文章結構結合選擇器分析,可以得知, 瀏覽,推薦和評論三者文檔基本一致,唯一不同之處就是排列順序而已,因此想要準確定位到瀏覽數,需要定位到第一個元素,推薦量則是第二個元素,因此類推.

    

         83瀏覽
    
    

         1推薦
    
    

         0評論
    
    

弄清楚基本文檔結構后,開始著手改造選擇器使其定位到全部文章的瀏覽量,我們做如下改造.

$("#articlesList div:nth-child(1) > em").text();

僅僅保留頭部和尾部,再去掉中間部分 > div:nth-child(1) > div.item-btm.clearfix > div > ,這樣就輕松定位到全部元素的瀏覽量了,是不是很簡單?

看到控制臺輸出結果,心里瞬間踏實了,這不剛好是第一頁全部文章的瀏覽量嗎?觀察輸出內容格式可知,我們需要將整個字符串按照空格分割成字符串數組.

需要注意的是,行首還有一個空格喲,因此在分割成字符串數組前,我們先將行首的空格去除掉.

// 去除空格前:" 83瀏覽 91瀏覽 114瀏覽 150瀏覽 129瀏覽 175瀏覽 222瀏覽 173瀏覽 225瀏覽 200瀏覽 201瀏覽 217瀏覽 291瀏覽 202瀏覽 229瀏覽 184瀏覽 226瀏覽 155瀏覽 153瀏覽 211瀏覽"

$("#articlesList div:nth-child(1) > em").text().trim();

// 去除空格后: "83瀏覽 91瀏覽 114瀏覽 150瀏覽 129瀏覽 175瀏覽 222瀏覽 173瀏覽 225瀏覽 200瀏覽 201瀏覽 217瀏覽 291瀏覽 202瀏覽 229瀏覽 184瀏覽 226瀏覽 155瀏覽 153瀏覽 211瀏覽"

現在我們再將這整個字符串按照空格分割成字符串數組.

// 分割字符串前: "83瀏覽 91瀏覽 114瀏覽 150瀏覽 129瀏覽 175瀏覽 222瀏覽 173瀏覽 225瀏覽 200瀏覽 201瀏覽 217瀏覽 291瀏覽 202瀏覽 229瀏覽 184瀏覽 226瀏覽 155瀏覽 153瀏覽 211瀏覽"

$("#articlesList div:nth-child(1) > em").text().trim().split(" ");

// 分割字符串后: ["83瀏覽", "91瀏覽", "114瀏覽", "150瀏覽", "129瀏覽", "175瀏覽", "222瀏覽", "173瀏覽", "225瀏覽", "200瀏覽", "201瀏覽", "217瀏覽", "291瀏覽", "202瀏覽", "229瀏覽", "184瀏覽", "226瀏覽", "155瀏覽", "153瀏覽", "211瀏覽"]

現在我們已經夠將整個字符串分割成一個個小的字符串,下面需要再將83瀏覽中的瀏覽去掉,僅僅保留數字83.

$.each($("#articlesList div:nth-child(1) > em").text().trim().split(" "),function(idx,ele){
     console.log(ele.substr(0,ele.lastIndexOf("瀏覽")));
});

現在我們已經抓取到真正的瀏覽量,接下來就比較簡單了,直接將這些瀏覽量進行累加即可,需要注意的是,這里的瀏覽數還是字符串類型,需要轉換成數字類型才能進行累加運算喲!

//閱讀量
var readCount = 0;
$.each($("#articlesList div:nth-child(1) > em").text().trim().split(" "),function(idx,ele){
     readCount += parseInt(ele.substr(0,ele.lastIndexOf("瀏覽")));
});
console.log("閱讀量: " + readCount);

我們以 chrome 瀏覽器為例,講解了如何利用自帶的控制臺工具抓取關鍵數據,從頁面結構分析入口,一步一個腳印提取有效數據,最終從一條數據變成多條數據,進而實現數據的累加統計.

總體來說,還是比較簡單的,并不需要太多的基礎知識,但還是稍微總結其中涉及到的 jQuery 知識點吧!

定位到具體元素: $("這里是復制的選擇器")

定位到具體元素內容: $("這里是復制的選擇器").text()

去除字符串首尾空格: $("這里是復制的選擇器").text().trim()

將字符串按照空格分割成字符串數組: $("這里是復制的選擇器").text().trim().split(" ")

截取字符串指定部分: ele.substr(0,ele.lastIndexOf("瀏覽")

將字符串轉化成數字類型: parseInt(ele.substr(0,ele.lastIndexOf("瀏覽")));

變量累加求和: readCount += parseInt(ele.substr(0,ele.lastIndexOf("瀏覽")));

完整示例:

//閱讀量
var readCount = 0;
$.each($("#articlesList div:nth-child(1) > em").text().trim().split(" "),function(idx,ele){
     readCount += parseInt(ele.substr(0,ele.lastIndexOf("瀏覽")));
});
console.log("閱讀量: " + readCount);

//推薦量
var recommendCount = 0;
$.each($("#articlesList div:nth-child(2) > em").text().trim().split(" "),function(idx,ele){
     recommendCount += parseInt(ele.substr(0,ele.lastIndexOf("推薦")));
});
console.log("推薦量: " + recommendCount);

//評論量
var commendCount = 0;
$.each($("#articlesList div:nth-child(3) > em").text().trim().split(" "),function(idx,ele){
     commendCount += parseInt(ele.substr(0,ele.lastIndexOf("評論")));
});
console.log("評論量: " + commendCount);

簡書的文章數據不一定很規整,比如有的發布文章還沒有簡書鉆,所以閱讀量的排列順序就是不確定的,這一點不像前面介紹的慕課手記,但是簡書的關鍵數據前面是有小圖標的,因此我們可以利用圖標定位到旁邊的數據.

按照前面介紹的步驟,我們仍然定位到閱讀量,然而 #note-44847909 > div > div > a:nth-child(2) > i 卻不能直接使用,因為我們剛剛分析了,簡書不能利用順序定位只能用圖標輔助定位.

所以,還是先看看文檔結構,嘗試著直接定位到全部的閱讀量小圖標.

經過分析文章結構,我們可以很輕松定位到全部閱讀小圖標,當然這是一個元素數組,并不是字符串數組喲!

$("#list-container .ic-list-read")

接下來我們看一下能否正確定位到每一個小圖標,進而定位到小圖標左側的閱讀量.

現在我們已經能夠定位到全部的閱讀量小圖標,現在思考如何定位到旁邊的真正閱讀量呢?

    
       0.2
    
    
         2
            
    
       0
          
     1
    昨天 10:39

分析文章結構,我們發現閱讀量是小圖標的父節點的內容,這一下就簡單了,我們順藤摸瓜定位到父節點自然就能定位到閱讀量了!

$("#list-container .ic-list-read").each(function(idx,ele){
    console.log($(ele).parent().text().trim());
});

現在既然已經能夠定位到閱讀量,那么首先累加求和就很簡單了.

//閱讀量
var readCount = 0;
$("#list-container .ic-list-read").each(function(idx,ele){
    readCount += parseInt($(ele).parent().text().trim());
});
console.log("閱讀量: " + readCount);

首先分析文章基本結構發現,簡書的閱讀量需要定位到閱讀量小圖標,進而定位到父節點,然后父節點的內容才是真正的閱讀量.

定位到真正的閱讀量后,一切問題迎刃而解,總結一下新增 jQuery 知識點.

定位到當前節點的父節點: $(ele).parent()

完整示例:

//閱讀量
var readCount = 0;
$("#list-container .ic-list-read").each(function(idx,ele){
    readCount += parseInt($(ele).parent().text().trim());
});
console.log("閱讀量: " + readCount);

//評論量
var commendCount = 0;
$("#list-container .ic-list-comments").each(function(idx,ele){
    commendCount += parseInt($(ele).parent().text().trim());
});
console.log("評論量: " + commendCount);

//喜歡量
var recommendCount = 0;
$("#list-container .ic-list-like").each(function(idx,ele){
    recommendCount += parseInt($(ele).parent().text().trim());
});
console.log("喜歡量: " + recommendCount);

博客園的文章列表比較復古,傳統的 table 布局,是這幾個平臺中最簡單的,基本上不同怎么介紹.

復制到閱讀量選擇器: #post-row-10694598 > td:nth-child(4) 此時再結合文章結構,因此我們可以得到全部文章的閱讀量選擇器.

$("#post_list td:nth-child(4)")

接下來需要遍歷數組,看看能否抓取到當前頁面全部文章的閱讀量.

$("#post_list td:nth-child(4)").each(function(idx,ele){
    console.log($(ele).text().trim());
});

成功抓取到閱讀量,現在開始累加當前頁面全部文章的閱讀量.

//閱讀數
var readCount = 0;
$("#post_list td:nth-child(4)").each(function(idx,ele){
    readCount += parseInt($(ele).text().trim());
});
console.log("閱讀數: " + readCount);

中規中矩的傳統 table 布局,只需要順序定位到具體的元素即可,需要注意的是,博客園文章頁面采用了分頁,如果需要統計全部文章的閱讀量,需要將每頁的閱讀量手動累加計算.

完整示例:

//評論數
var commendCount = 0;
$("#post_list td:nth-child(3)").each(function(idx,ele){
    commendCount += parseInt($(ele).text().trim());
});
console.log("評論數: " + commendCount);

//閱讀數
var readCount = 0;
$("#post_list td:nth-child(4)").each(function(idx,ele){
    readCount += parseInt($(ele).text().trim());
});
console.log("閱讀數: " + readCount);

大致分析騰訊云社區的文章結構,基本上和簡書結構差不多,既可以像簡書那種采用圖標定位方式,也可以像慕課網和博客園那種直接順序定位.

為了較為精準的定位,現在采用圖標定位方式來獲取閱讀量.

#react-root > div:nth-child(1) > div.J-body.com-body.with-bg > section > div > section > div > div.com-log-list > section:nth-child(1) > section > div > div > span > span

既然要根據圖標定位,我們需要分析圖標和閱讀量的關系.

    
        
        76
    
    
        
        3
    

因此,我們需要做如下改造才能定位到與閱讀量.

$("#react-root .com-i-view").each(function(idx,ele){
    console.log($(ele).next().text().trim());
});

定位到閱讀量,接下來就是簡單的數據累加求和了.

//閱讀量
var readCount = 0;
$("#react-root .com-i-view").each(function(idx,ele){
    readCount += parseInt($(ele).next().text().trim());
});
console.log("閱讀量: " + readCount);

騰訊云社區和簡書一樣,采用的分頁疊加模式,因此需要統計全部文章的話,只需要一直滾動直到加載出全部文章即可.

總結一下涉及到的新增 jQuery 知識點:

獲取當前節點的下一個節點: $(ele).next()

完整示例:

//閱讀量
var readCount = 0;
$("#react-root .com-i-view").each(function(idx,ele){
    readCount += parseInt($(ele).next().text().trim());
});
console.log("閱讀量: " + readCount);

//點贊量
var recommendCount = 0;
$("#react-root .com-i-like").each(function(idx,ele){
    recommendCount += parseInt($(ele).next().text().trim());
});
console.log("點贊量: " + recommendCount);

本文通過 jQuery 方式直接抓取文章數據,簡單方便,學習成本低,能夠快速上手.

慕課網和博客園的文章列表存在分頁,如果需要統計全部文章瀏覽量,需要將每一頁的文章累加,直到最后一頁.
簡書和騰訊云社區的文章列表雖然也有分支,但會自動累加,所以統計全部文章時只需要先等全部文章加載完畢,再利用 js 腳本一次性統計即可.

好了,本次分享到此結束,如果你覺得本文對你有所幫助,歡迎分享讓更多人看到哦,對了,上一篇文章也是解決統計問題的,不過使用的是 java 讀取 csv 文件方式,如果有興趣,也可以看一看.