關(guān)于寫作那些事之利用 js 統(tǒng)計各大博客閱讀量

lanffy 發(fā)布于2019-08-23 16:55 / 2071人閱讀

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

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

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

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

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

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

關(guān)于如何利用 csv 文件處理統(tǒng)計數(shù)據(jù),可以參考 https://snowdreams1006.github.io/static-semi-manual-with-csv.html

實現(xiàn)效果 慕課手記

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

簡書

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

博客園

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

騰訊云社區(qū)

騰訊云社區(qū) : https://cloud.tencent.com/dev...

js 抓取分析數(shù)據(jù)

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

慕課手記

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

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

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

現(xiàn)在已經(jīng)成功定位到指定元素,而我們要統(tǒng)計的是全部文章的閱讀量,因此需要定位到全部元素.

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

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

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

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

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

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

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

// 去除空格前:" 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瀏覽"

現(xiàn)在我們再將這整個字符串按照空格分割成字符串數(shù)組.

// 分割字符串前: "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瀏覽"]

現(xiàn)在我們已經(jīng)夠?qū)⒄麄€字符串分割成一個個小的字符串,下面需要再將83瀏覽中的瀏覽去掉,僅僅保留數(shù)字83.

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

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

//閱讀量
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);

小結(jié)

我們以 chrome 瀏覽器為例,講解了如何利用自帶的控制臺工具抓取關(guān)鍵數(shù)據(jù),從頁面結(jié)構(gòu)分析入口,一步一個腳印提取有效數(shù)據(jù),最終從一條數(shù)據(jù)變成多條數(shù)據(jù),進而實現(xiàn)數(shù)據(jù)的累加統(tǒng)計.

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

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

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

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

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

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

將字符串轉(zhuǎn)化成數(shù)字類型: 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);

簡書

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

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

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

經(jīng)過分析文章結(jié)構(gòu),我們可以很輕松定位到全部閱讀小圖標,當然這是一個元素數(shù)組,并不是字符串數(shù)組喲!

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

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

現(xiàn)在我們已經(jīng)能夠定位到全部的閱讀量小圖標,現(xiàn)在思考如何定位到旁邊的真正閱讀量呢?

分析文章結(jié)構(gòu),我們發(fā)現(xiàn)閱讀量是小圖標的父節(jié)點的內(nèi)容,這一下就簡單了,我們順藤摸瓜定位到父節(jié)點自然就能定位到閱讀量了!

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

現(xiàn)在既然已經(jīng)能夠定位到閱讀量,那么首先累加求和就很簡單了.

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

小結(jié)

首先分析文章基本結(jié)構(gòu)發(fā)現(xiàn),簡書的閱讀量需要定位到閱讀量小圖標,進而定位到父節(jié)點,然后父節(jié)點的內(nèi)容才是真正的閱讀量.

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

定位到當前節(jié)點的父節(jié)點: $(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);

博客園

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

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

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

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

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

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

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

小結(jié)

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

完整示例:

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

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

騰訊云社區(qū)

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

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

#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

既然要根據(jù)圖標定位,我們需要分析圖標和閱讀量的關(guān)系.

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

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

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

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

小結(jié)

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

總結(jié)一下涉及到的新增 jQuery 知識點:

獲取當前節(jié)點的下一個節(jié)點: $(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);

小結(jié)

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

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

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

GPU云服務器云服務器云服務器那些事閱讀數(shù)據(jù)統(tǒng)計統(tǒng)計量數(shù)據(jù)量統(tǒng)計

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103505.html

發(fā)表評論

登陸后可評論

0條評論

lanffy

男|高級講師

我要關(guān)注我要私信

TA的文章

C# 從 UTF-8 流中讀取字符串的正確方法

閱讀 3031·2021-11-22 12:06
【C語言進階】自定義類型（1）結(jié)構(gòu)體

閱讀 612·2021-09-03 10:29
Obsidian + Seafile搭建私有筆記，附使用入門

閱讀 6575·2021-09-02 09:52
ajax學習筆記

閱讀 2027·2019-08-30 15:52
前端每日實戰(zhàn)：128# 視頻演示如何用純 CSS 創(chuàng)作一個“女神來了，快讓路”的動畫

閱讀 3423·2019-08-29 16:39
面試小結(jié)（二）

閱讀 1198·2019-08-29 15:35
Codepen 每周精選：21個頁面特效（2018-5-7）

閱讀 2072·2019-08-29 15:17
就這樣，我把4000張美女和帥哥照片下載本地了

閱讀 1433·2019-08-29 11:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于寫作那些事之利用 js 統(tǒng)計各大博客閱讀量

相關(guān)文章

關(guān)于寫作那些事之終于還是無法忍受純?nèi)斯?em>統(tǒng)計數(shù)據(jù)

寫技術(shù)博客那點事

寫技術(shù)博客那點事

技術(shù)文章寫作及運營的技巧：分析篇 | 什么樣的文章受歡迎？

發(fā)表評論

0條評論

lanffy

男|高級講師

TA的文章

C# 從 UTF-8 流中讀取字符串的正確方法

【C語言進階】自定義類型（1）結(jié)構(gòu)體

Obsidian + Seafile搭建私有筆記，附使用入門

ajax學習筆記

前端每日實戰(zhàn)：128# 視頻演示如何用純 CSS 創(chuàng)作一個“女神來了，快讓路”的動畫

面試小結(jié)（二）

Codepen 每周精選：21個頁面特效（2018-5-7）

就這樣，我把4000張美女和帥哥照片下載本地了

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于寫作那些事之利用 js 統(tǒng)計各大博客閱讀量

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！