Веб-скрапинг с использованием cheerio в node.js

Введение:

Очистка веб-страниц – это метод, используемый для извлечения данных или информации с веб-сайтов. Это простой способ получить большой объем данных с веб-сайтов. Большинство данных организовано не в структурированном формате, а в формате HTML, поэтому вам необходимо преобразовать их в структурированные данные, чтобы их можно было используется в нескольких приложениях.

Если вы хотите получить данные с любого веб-сайта, вам просто нужно использовать любой веб-инструмент очистки и некоторую обработку страницы после этого, вам нужно сохранить эти данные в своем приложении. . вы можете использовать node.js для создания мощного веб-парсера, чрезвычайно универсального и совершенно бесплатного.

Мы удалим данные с веб-сайта espncricinfo.com. На этом веб-сайте есть различные турниры по крикету. Мы собираемся отменить матч IPL. Мы извлекаем различную статистику из определенного матча.

Инструменты для просмотра веб-страниц в node.js:

• Черио
• Кукольник
• Драматург
• джсдом

Вы можете использовать любой инструмент для веб-скрейпинга. Для парсинга мы будем использовать модуль Cheerio npm.

Первоначальная настройка:

Прежде чем начать, убедитесь, что в вашей системе установлены node.js и npm или yarn. Посетите nodejs.org, чтобы загрузить последнюю версию Node, если в вашей системе нет >node.js.

Установите зависимости:

У нас есть три зависимости, которые нужно установить для веб-скрейпинга.

1. express: это известная и гибкая платформа Node.js для разработки веб-приложений. Он предлагает надежные функции для создания веб-приложений и мобильных приложений.
2. запрос:модуль запроса используется для выполнения HTTP-вызовов. Это самый простой способ выполнения HTTP-вызовов в node. js, используя этот модуль запроса.
3. cheerio. Cheerio — это эффективная библиотека, позволяющая использовать богатый и мощный API jQuery на стороне сервера. Он использует ядро ​​jQuery. Вы можете узнать больше, посетив модуль npm cheerio.

Запустите эту команду, чтобы установить все зависимости, упомянутые выше.

npm install express request cheerio

Мы рассмотрим ниже упомянутые пункты:

• Сбор требований к данным
• Получение веб-страницы по URL-адресу
• Извлечение данных с веб-страницы
• Храните данные в формате JSON

Сбор необходимых данных:

Прежде чем приступить к парсингу, убедитесь, что вы четко представляете, какие данные вам нужны.

Вот список данных, которые мы хотим получить с веб-страницы.

• Соответствие: номер совпадения
• Место проведения: название крикетного стадиона.
• Дата: дата совпадения
• Команды: названия команд
• Жеребьевка: какая команда выигрывает жеребьевку и ее решение.
• Счет: подробная информация об окончательном счете обеих команд и итоговом результате матча.
• Игрок матча: сведения об имени игрока, счете и команде для лучшего игрока матча.
• Лучший результат: показывает самый высокий результат в матче.
• Лучший результат в боулинге: сведения о игроке, набравшем наибольшее количество калиток.

В этом примере мы должны сохранить все данные в формате JSON и отправить ответ в формате JSON. .

Получение веб-страницы по URL-адресу:

Создайте matchStats.js в корневом каталоге вашего приложения и добавьте приведенный ниже фрагмент кода.

matchStats.js

const request = require(‘request’);
const cheerio = require(‘cheerio’);
const url = ‘https://www.espncricinfo.com/series/ipl-2021-1249214/royal-challengers-bangalore-vs-punjab-kings-48th-match-1254090/full-scorecard';
const matchStats = async (req, response) => {
// Get HTML of request
request(url, async (err, res, html) => {
  if (err) {
    console.log(err);
  } else {
    const data = await extractHtml(html);
    return response.status(200).json(data)
  }
})

Прежде всего, вам необходимо импортировать модуль request для вызовов HTTP и cheerio для парсинга веб-страниц. Создайте переменную url для посещения определенного матча. Внутри функции matchStats() создайте функцию request() и извлеките HTML веб-страницы. Он принимает три аргумента: err, res и html. мы должны использовать html и передать в функцию extractHtml().

Извлечение данных с веб-страницы:

Прежде чем чистить данные с веб-страницы, очень важно понять структуру HTML страницы.

Вы должны добавить приведенный ниже фрагмент кода рядом с функцией request().

const extractHtml = async (html) => {
// load HTMl into cheerio module
let $ = cheerio.load(html);
// Get the particular details from class attribute
let venue = $(".match-venue").text();
let match = $(".header-info .description").text().split(' ').slice(0, 2).join(' ');
let teamNames = $(".match-info.match-info-MATCH .team .name-detail");
let teamScores = $(".match-info.match-info-MATCH .team .score-detail .score");
let matchDetails = $(".card.content-block.match-scorecard-table>.table-responsive").find('tr');
let playerOfMatch = $(".playerofthematch-player-detail").text().split(', ');
let playerOfMatchScore = $(".playerofthematch-score-text").text();
let matchResult = $(".match-info.match-info-MATCH .status-text").text();
let innings = $(".card.content-block.match-scorecard-table>.Collapsible");

Внутри функции extractHtml() мы должны загрузить html с помощью load() в модуль cheerio и >сохранить каждый элемент в переменной.

Извлеките место проведения:

Извлеките место проведения матча, которое нам нужно, просто щелкнув правой кнопкой мыши рядом с местом проведения матча (вы можете найти его в таблице сведений о матче) в браузере и нажмите при проверке.

Вы можете найти класс match-venue (как показано на рисунке выше) и выполнить поиск для уникального результата. Это всего лишь один результат, поэтому вы можете используйте этот класс и метод text(), используемый для извлечения текста из элемента.

Извлеките номер совпадения:

Чтобы извлечь номер совпадения, мы должны проверить элемент непосредственно перед тем, как мы это сделали, и мы нашли .header-info .descriptionдва класса для достижения совпадения Детали. Но нам нужен только номер совпадения, поэтому мы должны разделить текст, сохранить первые два элемента массива и присоединить к одной строке, а значение сохранить в переменной match.

Извлеките названия команд:

Проверьте веб-страницу рядом с названием команды, потому что нам нужны названия команд.

Нам нужно найти уникальный класс или атрибут, чтобы узнать названия команд. . Посмотрите на картинку выше: мы нашли .match-info.match-info-MATCH .team .name-detail три класса для достижения названия команды для обеих команд. На картинке вы можете увидеть только два результата поиска с обоими названиями команд. Оба этих элемента мы сохраняем в переменной teamNames.

let teamNameArr = [];
// Get team names
teamNames.each((i, name) => {
  teamNameArr.push($(name).text());
})

Создайте массив teamNameArr для хранения имен команд и получите каждый элемент из teamNames. После этого извлеките текст из элемента и вставьте его в teamNameArr.

Извлеките счет команды:

Проверьте оценку так же, как мы делали это раньше для названий команд, и найдите класс уникальный для обеихкомандных оценок. Мы нашел .match-info.match-info-MATCH .team .score-detail .scoreэтот класс для счетов команд и сохранил в >teamScoresпеременная.

let teamScoreArr = [];
// Get Team Score
teamScores.each((i, score) => {
  teamScoreArr.push($(score).text());
})

Создайте массив teamScoreArr для хранения командных очков и получите каждый элемент из teamScores. После этого извлеките текст из элемента и вставьте его в teamScoreArr.

Извлечение сведений о совпадении:

Чтобы извлечь детали матча для даты матча и получить жеребьевку. Изучив таблицу детали соответствия, мы нашли классы .card.content-block.match-scorecard-table›.table-responsive для получения таблицы и использования find ()метод получения всех tr.

// Get Match Date
const dateRow = $(matchDetails[6]).find(‘td’);
const date = $(dateRow[1]).text().split(‘(‘)[0].trim();

Чтобы получить дату совпадения, мы должны использовать matchDetails и получить строку даты после этого найти конкретную ячейку. > и извлеките текст и разделите из '(', чтобы получить точную дату совпадения и используйте trim(), чтобы удалить лишние пробелы.

// Get Toss
const tossRow = $(matchDetails[1]).find('td');
const toss = $(tossRow[1]).text().split('-')[0].trim();

Чтобы получить жеребьевку точно мы сделали для даты.

ПРИМЕЧАНИЕ. Тот же процесс мы должны использовать для извлечения playerOfMatch, playerOfMatchScore, matchResult и иннингов. .

Узнайте имена и результаты команд:

// Get both Team Names and Scores
const [team1Name, team2Name] = teamNameArr;
const [team1Score, team2Score] = teamScoreArr;

Чтобы получить названия команд имена и очки, мы просто деструктурируем teamNameArr и массив teamScoreArr.

Получите лучший результат:

// Get the Best Batting Score
let hrBatsmanName = '';
let hrBatsmanRuns = 0;
let hrBatsmanBalls = 0;
let hrBatsmanFours = 0;
let hrBatsmanSixes = 0;
let hrBatsmanSr = 0;

Чтобы сохранить сведения о лучшем счете ватина, мы должны определить переменную в ее начальном значении.

// Looping into both innings
innings.each((i, inning) => {
  // Find batman table and get all the rows from batsman table
  let allBatsman = $(inning).find('.table.batsman tbody tr');
  // Looping into all the batsman rows
  allBatsman.each((i, batsman) => {
    // Find all the columns from particular batsman row
    let batsmanDetails = $(batsman).find('td');
    let batsmanName = $(batsmanDetails[0]).text().trim().replace(/[^a-zA-Z ]/g, "");
    let batsmanRuns = $(batsmanDetails[2]).text();
    let batsmanBalls = $(batsmanDetails[3]).text();
    let batsmanFours = $(batsmanDetails[5]).text();
    let batsmanSixes = $(batsmanDetails[6]).text();
    let batsmanSr = $(batsmanDetails[7]).text();
    // check highest batsman run and assign details
    if (batsmanRuns > hrBatsmanRuns) {
      hrBatsmanName = batsmanName;
      hrBatsmanRuns = parseInt(batsmanRuns);
      hrBatsmanBalls = parseInt(batsmanBalls);
      hrBatsmanFours = parseInt(batsmanFours);
      hrBatsmanSixes = parseInt(batsmanSixes);
      hrBatsmanSr = parseFloat(batsmanSr);
    }
  })
})

Чтобы найти лучший результат ватина, мы просто перебираем оба иннинга и находим каждый ряд игроков с битой. После этого мы должны зациклиться на allBatsman и найти информацию о конкретном batsman. Чтобы получить сведения о конкретном игроке с битой, извлеките текст из batsmanDetails и сохраните его в новом >переменная. После этого мы должны проверить самый высокий пробег бэтсмена и заменить его значение до последнего бэтсмен.

Получите лучший результат в боулинге:

// Get the Best Bowling Score
let hwBowlerName = '';
let hwBowlerOvers = 0;
let hwBowlerRuns = 0;
let hwBowlerWickets = 0;
let hwBowlerEcon = 0;

Чтобы сохранить сведения о лучшем счете в боулинге, мы должны определить переменную в ее начальное значение.

// assignerHelper function
const assignerHelper = async (bowlerName, bowlerOvers, bowlerRuns, bowlerWickets, bowlerEcon) => {
  hwBowlerName = bowlerName;
  hwBowlerOvers = bowlerOvers;
  hwBowlerRuns = bowlerRuns;
  hwBowlerWickets = bowlerWickets;
  hwBowlerEcon = bowlerEcon;
}

Прежде чем перейти к процессу, мы просто создадим функцию assignerHelper(). Он используется для назначения сведений о боулерах. Мы не хотим писать один и тот же код несколько раз, как правило, это не очень хорошая практика.

// Looping into both innings
innings.each((i, inning) => {
  // Find batman table and get all the rows from batsman table
  let allBowler = $(inning).find('.table.bowler tr');
  // Looping into all the bowler rows
  allBowler.each(async (i, bowler) => {
    // Find all the columns from particular bowler row
    let bowlerDetails = $(bowler).find('td');
    let bowlerName = $(bowlerDetails[0]).text();
    let bowlerOvers = $(bowlerDetails[1]).text();
    let bowlerRuns = $(bowlerDetails[3]).text();
    let bowlerWickets = $(bowlerDetails[4]).text();
    let bowlerEcon = $(bowlerDetails[5]).text();
    // Check highest wicket and assign using helper function
    if (bowlerWickets > hwBowlerWickets) {
      await assignerHelper(bowlerName, bowlerOvers, bowlerRuns, bowlerWickets, bowlerEcon);
    } else if (bowlerWickets == hwBowlerWickets) {
      // Check lowest economy
      if (bowlerEcon < hwBowlerEcon) {
        await assignerHelper(bowlerName, bowlerOvers, bowlerRuns, bowlerWickets, bowlerEcon);
      }
    }
  })
})

Чтобы найти лучший счет в боулинге, мы просто перебираем оба иннинга и находим каждую строку боулера. После этого мы должны зациклиться на allBowler и найти информацию о конкретном bowler. Чтобы получить сведения о конкретном боулере, извлеките текст из bowlerDetails и сохраните его в новой переменной. После этого мы проверяем самую высокую калитку котелка и заменяем его значение до последнего котелка а также мы должны проверить, является ли калитка одинаковой для нескольких боулеров, мы должны проверить ее экономичность тоже. Так мы можем найти лучший счет в боулинге.

Сохраните данные в формате JSON:

После завершения всех процессов мы должны отправить ответ в формате JSON. Итак, мы хотим хранить все данные в формате JSON.

const data = {
  match,
  venue,
  date,
  teams: teamNameArr,
  toss,
  score: {
    team1: {
      name: team1Name,
      score: team1Score
    },
    team2: {
      name: team2Name,
      score: team2Score
    },
    result: matchResult
  },
  playerOfMatch: {
    team: playerOfMatch[1],
    name: playerOfMatch[0],
    score: playerOfMatchScore
  },
  bestBattingScore: {
    name: hrBatsmanName,
    runs: hrBatsmanRuns.toString(),
    balls: hrBatsmanBalls.toString(),
    fours: hrBatsmanFours.toString(),
    sixes: hrBatsmanSixes.toString(),
    sr: hrBatsmanSr.toString()
  },
  bestBowlingScore: {
    name: hwBowlerName,
    overs: hwBowlerOvers,
    runs: hwBowlerRuns,
    wickets: hwBowlerWickets,
    economy: hwBowlerEcon,
  }
}
return data;
} // extractHtml function closing bracket
} // matchStats function closing bracket
module.exports = matchStats;

Создать экспресс-сервер:

Мы перейдем к настройке приложения HTTP сервер с помощью Express. Создайте файл server.js в корневой папке вашего приложения и добавьте следующий фрагмент кода, чтобы настроить сервер. сильный>.

server.js

const express = require('express');
const matchStats = require('./matchStats');
const app = express();
const port = 3000;
app.get('/match-stats', matchStats);
app.listen(port, () => console.log(`Server is running at ${port}`));

Чтобы показать ответ в формате JSON, просто нажмите на ссылку http://localhost:3000/match-stats.

Вывод:

Спасибо, что прочитали эту статью и добрались до конца. Мы рассмотрели основы веб-скрейпинга с помощью cheerio. Вы можете посетить документацию Cheerio, если хотите заглянуть глубже и полностью понять, как это работает.

Вы можете найти полный код: happy’s GithubRepo

Если у вас есть какие-либо вопросы о коде или парсинге в целом, свяжитесь со мной по адресу: happy’s LinkedIn

Мы встретимся снова с чем-то интересным.

До тех пор,

Удачного программирования...!