如何用 JavaScript 制作网页爬虫

在这篇博客中，我将教你如何使用 axios 和 cheerio 制作网络爬虫。

const axios = require('axios')
const cheerio = require('cheerio')
// Replace the url with your url
const url = 'https://www.premierleague.com/stats/top/players/goals?se=-1&cl=-1&iso=-1&po=-1?se=-1'

axios(url)
    .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const statsTable = $('.statsTableContainer > tr')
        const statsData = []

        statsTable.each(function() {
            const rank = $(this).find('.rank > strong').text()
            const playerName = $(this).find('.playerName > strong').text()
            const nationality = $(this).find('.playerCountry').text()
            const mainStat = $(this).find('.mainStat').text()
            statsData.push({
                rank,
                playerName,
                nationality,
                mainStat
            })
        })
        // Will print the collected data
        console.log(statsData)
    })
    // In case of any error it will print the error
    .catch(console.error)

沃什

代码太多了，让我们逐一查看

npm install axios cheerio --save

安装或所需的依赖项

const axios = require('axios')
const cheerio = require('cheerio')

这将导入那些已安装的依赖项

const url = 'https://www.premierleague.com/stats/top/players/goals?se=-1&cl=-1&iso=-1&po=-1?se=-1'

这是我们将要抓取数据的 URL，你可以
根据需要更改它，但之后必须更改更多内容

axios(url)
    .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const statsTable = $('.statsTableContainer > tr')
        const statsData = []
    }

在第一行我们调用 axios 和 url，然后添加 .then 函数并在其中传递响应。
然后我们创建一个名为 html 的 const 并传递响应。数据
如果你现在使用

console.log(html)

那么它将打印网站的整个 html 代码。
好的现在我们创建一个名为 $ 的 const 然后用 cheerio 加载 html。
现在创建一个名为 statsTable 的 const 并传递（用 $ = cheerio）我们要从中抓取数据的 div 类。
现在我们正在创建一个 statsData，我们将在其中存储抓取的数据。


statsTable.each(function() {
            // If you replaced the url then you have to replace these too
            const rank = $(this).find('.rank > strong').text()
            const playerName = $(this).find('.playerName > strong').text()
            const nationality = $(this).find('.playerCountry').text()
            const mainStat = $(this).find('.mainStat').text()
            statsData.push({
                rank,
                playerName,
                nationality,
                mainStat
            })
        }) 

//  this code should be inside .then(responde => {}) which be made above

好的，现在我们只是找到特定的 div 来抓取数据，然后使用 .text() 将其转换为文本
，然后我们将这些特定 div 的文本推送到我们上面制作的 statsData 中。

现在我们只需要使用

console.log(statsData) // inside .then(responde => {})

它应该显示所有抓取的数据。

最后，当一切都结束时）我们将

.catch(console.error)

如果我们有一个并且完成了，它将会打印错误。

这是我第一次解释代码，所以我不知道我做得怎么样。

谢谢

文章来源：https://dev.to/heheprogrammer/how-to-make-a-web-scraper-with-javascript-18nk