整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文講解怎樣用 Node.js 高效地從 Web 爬取數據。
前提條件
本文主要針對具有一定 JavaScript 經驗的程序員。如果你對 Web 抓取有深刻的了解，但對 JavaScript 并不熟悉，那么本文仍然能夠對你有所幫助。
你將學到
通過本文你將學到：
了解 Node.js
Javascript 是一種簡單的現代編程語言，最初是為了向瀏覽器中的網頁添加動態效果。當加載網站后，Javascript 代碼由瀏覽器的 Javascript 引擎運行。為了使 Javascript 與你的瀏覽器進行交互，瀏覽器還提供了運行時環境（document、window等）。
這意味著 Javascript 不能直接與計算機資源交互或對其進行操作。例如在 Web 服務器中，服務器必須能夠與文件系統進行交互，這樣才能讀寫文件。
Node.js 使 Javascript 不僅能夠運行在客戶端，而且還可以運行在服務器端。為了做到這一點，其創始人 Ryan Dahl 選擇了Google Chrome 瀏覽器的 v8 Javascript Engine，并將其嵌入到用 C++ 開發的 Node 程序中。所以 Node.js 是一個運行時環境，它允許 Javascript 代碼也能在服務器上運行。
與其他語言（例如 C 或 C++）通過多個線程來處理并發性相反，Node.js 利用單個主線程并并在事件循環的幫助下以非阻塞方式執行任務。
要創建一個簡單的 Web 服務器非常簡單，如下所示：
const http = require('http');
const PORT = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, () => {
console.log(`Server running at PORT:${port}/`);
});如果你已安裝了 Node.js，可以試著運行上面的代碼。Node.js 非常適合 I/O 密集型程序。
HTTP 客戶端：訪問 Web
HTTP 客戶端是能夠將請求發送到服務器，然后接收服務器響應的工具。下面提到的所有工具底的層都是用 HTTP 客戶端來訪問你要抓取的網站。
Request
Request 是 Javascript 生態中使用最廣泛的 HTTP 客戶端之一，但是 Request 庫的作者已正式聲明棄用了。不過這并不意味著它不可用了，相當多的庫仍在使用它，并且非常好用。用 Request 發出 HTTP 請求是非常簡單的：
const request = require('request')
request('https://www.reddit.com/r/programming.json', function ( error,
response,
body) {
console.error('error:', error)
console.log('body:', body)
})你可以在 Github 上找到 Request 庫，安裝它非常簡單。你還可以在 https://github.com/request/request/issues/3142 找到棄用通知及其含義。
Axios
Axios 是基于 promise 的 HTTP 客戶端，可在瀏覽器和 Node.js 中運行。如果你用 Typescript，那么 axios 會為你覆蓋內置類型。通過 Axios 發起 HTTP 請求非常簡單，默認情況下它帶有 Promise 支持，而不是在 Request 中去使用回調：
const axios = require('axios')
axios
.get('https://www.reddit.com/r/programming.json')
.then((response) => {
console.log(response)
})
.catch((error) => {
console.error(error)
});如果你喜歡 Promises API 的 async/await 語法糖，那么你也可以用，但是由于頂級 await 仍處于 stage 3 ，所以我們只好先用異步函數來代替：
async function getForum() {
try {
const response = await axios.get(
'https://www.reddit.com/r/programming.json'
)
console.log(response)
} catch (error) {
console.error(error)
}
}你所要做的就是調用 getForum！可以在 https://github.com/axios/axios 上找到Axios庫。
Superagent
與 Axios 一樣，Superagent 是另一個強大的 HTTP 客戶端，它支持 Promise 和 async/await 語法糖。它具有像 Axios 這樣相當簡單的 API，但是 Superagent 由于存在更多的依賴關系并且不那么流行。
用 promise、async/await 或回調向 Superagent 發出HTTP請求看起來像這樣：
const superagent = require("superagent")
const forumURL = "https://www.reddit.com/r/programming.json"
// callbacks
superagent
.get(forumURL)
.end((error, response) => {
console.log(response)
})
// promises
superagent
.get(forumURL)
.then((response) => {
console.log(response)
})
.catch((error) => {
console.error(error)
})
// promises with async/await
async function getForum() {
try {
const response = await superagent.get(forumURL)
console.log(response)
} catch (error) {
console.error(error)
}
}可以在 https://github.com/visionmedia/superagent 找到 Superagent。
正則表達式：艱難的路
在沒有任何依賴性的情況下，最簡單的進行網絡抓取的方法是，使用 HTTP 客戶端查詢網頁時，在收到的 HTML 字符串上使用一堆正則表達式。正則表達式不那么靈活，而且很多專業人士和業余愛好者都難以編寫正確的正則表達式。
讓我們試一試，假設其中有一個帶有用戶名的標簽，我們需要該用戶名，這類似于你依賴正則表達式時必須執行的操作
const htmlString = '<label>Username: John Doe</label>'
const result = htmlString.match(/<label>(.+)<\/label>/)
console.log(result[1], result[1].split(": ")[1])
// Username: John Doe, John Doe在 Javascript 中，match() 通常返回一個數組，該數組包含與正則表達式匹配的所有內容。第二個元素（在索引1中）將找到我們想要的 <label> 標記的 textContent 或 innerHTML。但是結果中包含一些不需要的文本（ “Username: “），必須將其刪除。
如你所見，對于一個非常簡單的用例，步驟和要做的工作都很多。這就是為什么應該依賴 HTML 解析器的原因，我們將在后面討論。
Cheerio：用于遍歷 DOM 的核心 JQuery
Cheerio 是一個高效輕便的庫，它使你可以在服務器端使用 JQuery 的豐富而強大的 API。如果你以前用過 JQuery，那么將會對 Cheerio 感到很熟悉，它消除了 DOM 所有不一致和與瀏覽器相關的功能，并公開了一種有效的 API 來解析和操作 DOM。
const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')
$('h2.title').text('Hello there!')
$('h2').addClass('welcome')
$.html()
// <h2 class="title welcome">Hello there!</h2>如你所見，Cheerio 與 JQuery 用起來非常相似。
但是，盡管它的工作方式不同于網絡瀏覽器，也就這意味著它不能：
因此，如果你嘗試爬取的網站或 Web 應用是嚴重依賴 Javascript 的（例如“單頁應用”），那么 Cheerio 并不是最佳選擇，你可能不得不依賴稍后討論的其他選項。
為了展示 Cheerio 的強大功能，我們將嘗試在 Reddit 中抓取 r/programming 論壇，嘗試獲取帖子名稱列表。
首先，通過運行以下命令來安裝 Cheerio 和 axios：npm install cheerio axios。
然后創建一個名為 crawler.js 的新文件，并復制粘貼以下代碼：
const axios = require('axios');
const cheerio = require('cheerio');
const getPostTitles = async () => {
try {
const { data } = await axios.get(
'https://old.reddit.com/r/programming/'
);
const $ = cheerio.load(data);
const postTitles = [];
$('div > p.title > a').each((_idx, el) => {
const postTitle = $(el).text()
postTitles.push(postTitle)
});
return postTitles;
} catch (error) {
throw error;
}
};
getPostTitles()
.then((postTitles) => console.log(postTitles));getPostTitles() 是一個異步函數，將對舊的 reddit 的 r/programming 論壇進行爬取。首先，用帶有 axios HTTP 客戶端庫的簡單 HTTP GET 請求獲取網站的 HTML，然后用 cheerio.load() 函數將 html 數據輸入到 Cheerio 中。
然后在瀏覽器的 Dev Tools 幫助下，可以獲得可以定位所有列表項的選擇器。如果你使用過 JQuery，則必須非常熟悉 $('div> p.title> a')。這將得到所有帖子，因為你只希望單獨獲取每個帖子的標題，所以必須遍歷每個帖子，這些操作是在 each() 函數的幫助下完成的。
要從每個標題中提取文本，必須在 Cheerio 的幫助下獲取 DOM元素（ el 指代當前元素）。然后在每個元素上調用 text() 能夠為你提供文本。
現在，打開終端并運行 node crawler.js，然后你將看到大約存有標題的數組，它會很長。盡管這是一個非常簡單的用例，但它展示了 Cheerio 提供的 API 的簡單性質。
如果你的用例需要執行 Javascript 并加載外部源，那么以下幾個選項將很有幫助。
JSDOM：Node 的 DOM
JSDOM 是在 Node.js 中使用的文檔對象模型的純 Javascript 實現，如前所述，DOM 對 Node 不可用，但是 JSDOM 是最接近的。它或多或少地模仿了瀏覽器。
由于創建了 DOM，所以可以通過編程與要爬取的 Web 應用或網站進行交互，也可以模擬單擊按鈕。如果你熟悉 DOM 操作，那么使用 JSDOM 將會非常簡單。
const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
'<h2 class="title">Hello world</h2>'
).window
const heading = document.querySelector('.title')
heading.textContent = 'Hello there!'
heading.classList.add('welcome')
heading.innerHTML
// <h2 class="title welcome">Hello there!</h2>代碼中用 JSDOM 創建一個 DOM，然后你可以用和操縱瀏覽器 DOM 相同的方法和屬性來操縱該 DOM。
為了演示如何用 JSDOM 與網站進行交互，我們將獲得 Reddit r/programming 論壇的第一篇帖子并對其進行投票，然后驗證該帖子是否已被投票。
首先運行以下命令來安裝 jsdom 和 axios：npm install jsdom axios
然后創建名為 crawler.js的文件，并復制粘貼以下代碼：
const { JSDOM } = require("jsdom")
const axios = require('axios')
const upvoteFirstPost = async () => {
try {
const { data } = await axios.get("https://old.reddit.com/r/programming/");
const dom = new JSDOM(data, {
runScripts: "dangerously",
resources: "usable"
});
const { document } = dom.window;
const firstPost = document.querySelector("div > div.midcol > div.arrow");
firstPost.click();
const isUpvoted = firstPost.classList.contains("upmod");
const msg = isUpvoted
? "Post has been upvoted successfully!"
: "The post has not been upvoted!";
return msg;
} catch (error) {
throw error;
}
};
upvoteFirstPost().then(msg => console.log(msg));upvoteFirstPost() 是一個異步函數，它將在 r/programming 中獲取第一個帖子，然后對其進行投票。axios 發送 HTTP GET 請求獲取指定 URL 的HTML。然后通過先前獲取的 HTML 來創建新的 DOM。JSDOM 構造函數把HTML 作為第一個參數，把 option 作為第二個參數，已添加的 2 個 option 項執行以下功能：
創建 DOM 后，用相同的 DOM 方法得到第一篇文章的 upvote 按鈕，然后單擊。要驗證是否確實單擊了它，可以檢查 classList 中是否有一個名為 upmod 的類。如果存在于 classList 中，則返回一條消息。
打開終端并運行 node crawler.js，然后會看到一個整潔的字符串，該字符串將表明帖子是否被贊過。盡管這個例子很簡單，但你可以在這個基礎上構建功能強大的東西，例如，一個圍繞特定用戶的帖子進行投票的機器人。
如果你不喜歡缺乏表達能力的 JSDOM ，并且實踐中要依賴于許多此類操作，或者需要重新創建許多不同的 DOM，那么下面將是更好的選擇。
Puppeteer：無頭瀏覽器
顧名思義，Puppeteer 允許你以編程方式操縱瀏覽器，就像操縱木偶一樣。它通過為開發人員提供高級 API 來默認控制無頭版本的 Chrome。
Puppeteer 比上述工具更有用，因為它可以使你像真正的人在與瀏覽器進行交互一樣對網絡進行爬取。這就具備了一些以前沒有的可能性：
它還可以在 Web 爬取之外的其他任務中發揮重要作用，例如 UI 測試、輔助性能優化等。
通常你會想要截取網站的屏幕截圖，也許是為了了解競爭對手的產品目錄，可以用 puppeteer 來做到。首先運行以下命令安裝 puppeteer，：npm install puppeteer
這將下載 Chromium 的 bundle 版本，根據操作系統的不同，該版本大約 180 MB 至 300 MB。如果你要禁用此功能。
讓我們嘗試在 Reddit 中獲取 r/programming 論壇的屏幕截圖和 PDF，創建一個名為 crawler.js的新文件，然后復制粘貼以下代碼：
const puppeteer = require('puppeteer')
async function getVisual() {
try {
const URL = 'https://www.reddit.com/r/programming/'
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(URL)
await page.screenshot({ path: 'screenshot.png' })
await page.pdf({ path: 'page.pdf' })
await browser.close()
} catch (error) {
console.error(error)
}
}
getVisual()getVisual() 是一個異步函數，它將獲 URL 變量中 url 對應的屏幕截圖和 pdf。首先，通過 puppeteer.launch() 創建瀏覽器實例，然后創建一個新頁面。可以將該頁面視為常規瀏覽器中的選項卡。然后通過以 URL 為參數調用 page.goto() ，將先前創建的頁面定向到指定的 URL。最終，瀏覽器實例與頁面一起被銷毀。
完成操作并完成頁面加載后，將分別使用 page.screenshot() 和 page.pdf() 獲取屏幕截圖和 pdf。你也可以偵聽 javascript load 事件，然后執行這些操作，在生產環境級別下強烈建議這樣做。
在終端上運行 node crawler.js ，幾秒鐘后，你會注意到已經創建了兩個文件，分別名為 screenshot.jpg 和 page.pdf。
Nightmare：Puppeteer 的替代者
Nightmare 是類似 Puppeteer 的高級瀏覽器自動化庫，該庫使用 Electron，但據說速度是其前身 PhantomJS 的兩倍。
如果你在某種程度上不喜歡 Puppeteer 或對 Chromium 捆綁包的大小感到沮喪，那么 nightmare 是一個理想的選擇。首先，運行以下命令安裝 nightmare 庫：npm install nightmare
然后，一旦下載了 nightmare，我們將用它通過 Google 搜索引擎找到 ScrapingBee 的網站。創建一個名為crawler.js的文件，然后將以下代碼復制粘貼到其中：
const Nightmare = require('nightmare')
const nightmare = Nightmare()
nightmare
.goto('https://www.google.com/')
.type("input[title='Search']", 'ScrapingBee')
.click("input[value='Google Search']")
.wait('#rso > div:nth-child(1) > div > div > div.r > a')
.evaluate(
() =>
document.querySelector(
'#rso > div:nth-child(1) > div > div > div.r > a'
).href
)
.end()
.then((link) => {
console.log('Scraping Bee Web Link': link)
})
.catch((error) => {
console.error('Search failed:', error)
})首先創建一個 Nighmare 實例，然后通過調用 goto() 將該實例定向到 Google 搜索引擎，加載后，使用其選擇器獲取搜索框，然后使用搜索框的值（輸入標簽）更改為“ScrapingBee”。完成后，通過單擊 “Google搜索” 按鈕提交搜索表單。然后告訴 Nightmare 等到第一個鏈接加載完畢，一旦完成，它將使用 DOM 方法來獲取包含該鏈接的定位標記的 href 屬性的值。
最后，完成所有操作后，鏈接將打印到控制臺。
總結
互聯網時代，信息獲取變得越來越便捷。然而，在進行網頁數據分析或者自動化測試時，我們常常需要獲取特定的網頁元素。為了實現這一目的，有一種非常實用的工具——抓取網頁元素的插件。下面小編將與大家分享一些關于使用抓取網頁元素插件模仿點擊的經驗。
1.概述
抓取網頁元素的插件是一種能夠模仿用戶點擊操作，并且自動獲取所需數據或執行相應動作的工具。通過簡單配置和使用該插件，我們可以輕松地完成對網頁元素的抓取和操作。
2.安裝插件
首先，在瀏覽器中搜索并安裝適合自己需求的抓取網頁元素插件，如Chrome瀏覽器中常用的插件有SelectorGadget、XPath Helper等。安裝完成后，確保插件已啟用。
3.找到目標元素
在需要抓取的頁面上打開開發者工具（F12），選擇插件提供的定位工具（如SelectorGadget），然后點擊要抓取的目標元素。插件會自動生成對應的CSS選擇器或XPath路徑。
4.配置選擇器或路徑
將生成的CSS選擇器或XPath路徑復制到插件提供的配置界面中。根據需要，可以進一步調整選擇器或路徑，以確保準確地定位到目標元素。
5.模擬點擊操作
配置完成后，可以使用插件提供的模擬點擊功能來執行所需操作。例如，模擬點擊按鈕、鏈接或輸入框等。插件會自動模擬用戶點擊，并獲取相應的數據或執行相應的動作。
6.處理動態網頁
對于一些動態加載內容的網頁，插件可能無法直接獲取所需元素。這時，我們可以借助開發者工具中的網絡請求分析功能，找到對應的接口請求，并通過代碼發送請求獲取所需數據。
7.處理驗證碼
在一些情況下，網頁可能會出現驗證碼以防止機器人訪問。針對這種情況，我們可以使用第三方驗證碼識別服務，將驗證碼圖片提交給服務商進行識別，并將識別結果應用到插件中進行操作。
8.編寫腳本自動化
如果需要反復執行相同的抓取操作，可以考慮編寫腳本來實現自動化。通過腳本語言（如Python）結合插件提供的API或命令行工具，可以實現更加靈活和高效的抓取任務。
9.注意事項
在使用抓取網頁元素的插件時，需要注意以下幾點：
-遵守網站的使用規則和法律法規，不進行非法操作和侵犯他人隱私的行為；
-對于需要登錄的網頁，確保已經登錄，并且有足夠的權限進行操作；
-注意網頁結構的變化，及時更新選擇器或路徑以適應頁面變化。
通過使用抓取網頁元素的插件，我們可以輕松地實現對特定網頁元素的抓取和模擬點擊操作。無論是進行數據分析還是自動化測試，這一工具都能為我們節省大量時間和精力。希望以上經驗分享對大家有所幫助！
為一種面向對象的語言，Python是最容易學習的語言之一。Python的類和對象比任何其他計算機語言都更加用戶友好。此外，存在幾個庫，使得在Python中創建Web抓取工具變得輕而易舉。因此，使用Python步驟進行網絡抓取很可能很簡單。我敢打賭你的下一個問題是，什么是網絡抓取？跟我來！
在本文中，我們將介紹：
網絡抓取被定義為從互聯網上自動提取特定數據。它具有許多應用，例如為機器學習項目收集數據，開發價格比較工具或任何其他需要大量數據的新想法。
雖然理論上可以手動提取數據，但互聯網的廣闊性使得這種方法在許多情況下不切實際。了解如何創建網頁抓取工具可能會有所幫助。
雖然抓取是合法的，但您提取的數據可能不是。確保您沒有干擾以下任何一項：
此內容類型是某人的知識產權，受法律保護，不能簡單地重復使用。
如果您收集的信息可用于識別某人，則將其視為個人數據，并且很可能受到該地區法律的保護。建議您避免存儲數據，除非您有堅實的法律理由。
一般來說，在抓取之前，您應該始終閱讀每個網站的條款和條件，以確保您沒有違反他們的政策。如果您不確定如何繼續，請與網站所有者聯系并請求權限。
這篇Python網頁抓取文章將介紹開始使用簡單應用程序所需的所有知識。您將學習如何在抓取網站之前對其進行評估，如何使用BeautifulSoup提取精確的數據，以及如何在使用Selenium進行Java渲染之后提取數據，并將所有內容保存在新的CSV或JSON文件中。您將能夠按照下面提供的方法快速掌握如何完成網絡抓取。
本文在Python Web抓取庫Beautiful Soup的幫助下介紹了Web抓取的步驟。
網頁抓取涉及以下步驟：
Pip是在Python中安裝外部庫的最簡單方法。使用以下步驟進行安裝：
pip install requests
pip install html5lib
pip install bs4首先，導入請求庫。之后，輸入要抓取的網頁URL。將請求 （HTTP） 發送到提供的 URL，并將服務器響應保存在名為 r 的響應對象中。使用 print r.content 獲取網頁的“字符串”類型的 HTML 內容（原始）。
import requests
URL = "https://www.skillproperty.org/what-to-do-before-selling-your-home/"
r = requests.get(URL)
print(r.content)以這個為例，
soup = BeautifulSoup(r.content, 'html5lib')我們通過提供兩個參數來制作一個 BeautifulSoup 對象：
soup.prettify（） 現在已經打印出來了，它為您提供了從原始HTML內容生成的解析樹的可視化圖片。
#This will not run on online IDE
import requests
from bs4 import BeautifulSoup
URL = "http://www.skillproperty.com/blog"
r = requests.get(URL)
soup = BeautifulSoup(r.content, 'html5lib')
# should this return any error, install html5lib or 'pip install html5lib'
print(soup.prettify())現在我們想從HTML內容中提取一些有價值的數據。soup 對象包括分層結構中可以通過編程方式檢索的所有數據。在此示例中，我們正在處理一個充滿引號的網頁。因此，我們想開發一個程序來保存這些報價。
#program to scrap website and save quotes
import requests
from bs4 import BeautifulSoup
import csv
URL = "http://www.messagestogirl.com/romantic-quotes"
r = requests.get(URL)
soup = BeautifulSoup(r.content, 'html5lib')
quotes=[] # a list to store quotes
table = soup.find('div', attrs = {'id':'all_quotes'})
for row in table.findAll('div',
attrs = {'class':'col-6 col-lg-3 text-center margin-30px-bottom sm-margin-30px-top'}):
quote = {}
quote['theme'] = row.h5.text
quote['url'] = row.a['href']
quote['img'] = row.img['src']
quote['lines'] = row.img['alt'].split(" #")[0]
quote['author'] = row.img['alt'].split(" #")[1]
quotes.append(quote)
filename = 'motivational_quotes.csv'
with open(filename, 'w', newline='') as f:
w = csv.DictWriter(f,['theme','url','img','lines','author'])
w.writeheader()
for quote in quotes:
w.writerow(quote)
在繼續之前，建議您檢查我們使用soup.prettify（）生成的網頁的HTML文本，并尋找一種導航到引號的方法。
table = soup.find('div', attrs = {'id':'all_quotes'}) 第一個參數是要搜索的 HTML 標記，第二個參數是字典類型元素，用于描述與該標記連接的其他屬性。find（） 方法返回第一個匹配的元素。您可以嘗試打印 table.prettify（） 以了解此代碼的作用。
在本例中，我們使用 findAll（） 函數，該函數在參數方面與 find 方法相當，但返回所有匹配組件的列表。現在使用名為row的變量來遍歷每個引號。
現在考慮這段代碼：
for row in table.find_all_next('div', attrs =
{'class': 'col-6 col-lg-3 text-center margin-30px-bottom sm-margin-30px-top'}):
quote = {}
quote['theme'] = row.h5.text
quote['url'] = row.a['href']
quote['img'] = row.img['src']
quote['lines'] = row.img['alt'].split(" #")[0]
quote['author'] = row.img['alt'].split(" #")[1]
quotes.append(quote)
為了保存有關報價的所有信息，我們開發了一本字典。點表示法可用于訪問分層結構。然后，我們使用 .text 獲取 HTML 元素中的文本。
quote['theme'] = row.h5.text將標簽視為字典，使我們能夠添加，修改和刪除該標簽的屬性。
quote['url'] = row.a['href']最后，所有引號都將附加到名為引號的列表中。
所以，這是一個如何在Python中制作網頁抓取器的基本示例。從這里，您可以嘗試廢棄您想要的任何其他網站！你可以花時間學習python，因為這是一個很好的技能。
從現在開始，你只能靠自己了。用Python構建網絡抓取器，獲取數據，并從大量信息中得出結論，這本身就是一個迷人而具有挑戰性的過程。
感謝您的閱讀！
原文標題：Web Scraping with Python – Learning the Basics
作者：AI
原文：https://rubikscode.net/2022/05/02/web-scraping-with-python-learning-the-basics/
編譯：LCR
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
