Ξεκινώντας με το Web Scraping σε JavaScript

Η απόξεση Ιστού είναι ένα από τα πιο ενδιαφέροντα πράγματα στον κόσμο της κωδικοποίησης.

Τι είναι το web scraping;

Γιατί μάλιστα υπάρχει;

Ας μάθουμε τις απαντήσεις.

Τι είναι το Web Scraping;

Το web scraping είναι μια αυτοματοποιημένη εργασία για την εξαγωγή δεδομένων από ιστότοπους.

Υπάρχουν πολλές εφαρμογές web scraping. Εξαγωγή των τιμών των προϊόντων και σύγκρισή τους με διαφορετικές πλατφόρμες ηλεκτρονικού εμπορίου. Λήψη ημερήσιας προσφοράς από τον Ιστό. Δημιουργώντας τη δική σας μηχανή αναζήτησης όπως Google, Yahoo, κ.λπ.., Η λίστα συνεχίζεται.

Μπορείτε να κάνετε περισσότερα από όσα νομίζετε με το web scraping. Μόλις μάθετε πώς να εξαγάγετε τα δεδομένα από ιστότοπους, μπορείτε να κάνετε ό,τι θέλετε με τα δεδομένα.

Το πρόγραμμα που εξάγει τα δεδομένα από ιστοσελίδες ονομάζεται web scraper. Θα μάθετε να γράφετε web scrapers σε JavaScript.

Υπάρχουν κυρίως δύο μέρη για την απόξεση ιστού.

  • Λήψη δεδομένων χρησιμοποιώντας βιβλιοθήκες αιτημάτων και πρόγραμμα περιήγησης χωρίς κεφαλή.
  • Ανάλυση των δεδομένων για εξαγωγή των ακριβών πληροφοριών που θέλουμε από τα δεδομένα.

Χωρίς περαιτέρω καθυστέρηση, ας ξεκινήσουμε.

Ρύθμιση έργου

Υποθέτω ότι έχετε εγκαταστήσει το Node, αν όχι, ρίξτε μια ματιά στον οδηγό εγκατάστασης του NodeJS.

Θα χρησιμοποιήσουμε τα πακέτα node-fetch και cheerio για απόξεση ιστού σε JavaScript. Ας ρυθμίσουμε το έργο με το npm ώστε να λειτουργεί με ένα πακέτο τρίτων.

Ας δούμε γρήγορα τα βήματα για να ολοκληρώσουμε τη ρύθμισή μας.

  • Δημιουργήστε έναν κατάλογο που ονομάζεται web_scraping και πλοηγηθείτε σε αυτόν.
  • Εκτελέστε την εντολή npm init για να αρχικοποιήσετε το έργο.
  • Απαντήστε σε όλες τις ερωτήσεις με βάση τις προτιμήσεις σας.
  • Τώρα, εγκαταστήστε τα πακέτα χρησιμοποιώντας την εντολή
npm install node-fetch cheerio

Ας δούμε τις αναλαμπές των εγκατεστημένων πακέτων.

  10 καλύτερα εργαλεία παρακολούθησης σφαλμάτων για σύγχρονες ομάδες προγραμματιστών

κόμβος-ανάκτηση

Το πακέτο node-fetch φέρνει το window.fetch στο περιβάλλον του κόμβου js. Βοηθά να κάνετε τα αιτήματα HTTP και να λαμβάνετε τα ακατέργαστα δεδομένα.

cheerio

Το πακέτο cheerio χρησιμοποιείται για την ανάλυση και εξαγωγή των πληροφοριών που είναι απαραίτητες από τα ανεπεξέργαστα δεδομένα.

Δύο πακέτα node-fetch και cheerio είναι αρκετά καλά για απόξεση ιστού σε JavaScript. Δεν πρόκειται να δούμε όλες τις μεθόδους που παρέχουν τα πακέτα. Θα δούμε τη ροή του web scraping και τις πιο χρήσιμες μεθόδους σε αυτή τη ροή.

Θα μάθετε την απόξεση ιστού κάνοντας το. Λοιπόν, ας πάμε στη δουλειά.

Λίστα Παγκοσμίου Κυπέλλου απόξεσης κρίκετ

Εδώ σε αυτήν την ενότητα, πρόκειται να κάνουμε πραγματική απόξεση ιστού.

Τι εξάγουμε;

Από τον τίτλο της ενότητας, νομίζω ότι θα το μαντεύατε εύκολα. Ναι, ό,τι σκέφτεσαι είναι σωστό. Ας εξαγάγουμε όλους τους νικητές και τους δευτεραθλητές του Παγκοσμίου Κυπέλλου κρίκετ μέχρι τώρα.

  • Δημιουργήστε ένα αρχείο με το όνομα extract_cricket_world_cups_list.js στο έργο.
  • Θα χρησιμοποιήσουμε το Παγκόσμιο Κύπελλο Κρίκετ Wikipedia σελίδα για να λάβετε τις επιθυμητές πληροφορίες.
  • Αρχικά, λάβετε τα ανεπεξέργαστα δεδομένα χρησιμοποιώντας το πακέτο ανάκτησης κόμβου.
  • Ο παρακάτω κώδικας λαμβάνει τα ακατέργαστα δεδομένα της παραπάνω σελίδας της Wikipedia.
const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

Λάβαμε τα ακατέργαστα δεδομένα από τη διεύθυνση URL. Τώρα, ήρθε η ώρα να εξαγάγουμε τις πληροφορίες που χρειαζόμαστε από τα ακατέργαστα δεδομένα. Ας χρησιμοποιήσουμε το πακέτο cheerio για να εξαγάγουμε τα δεδομένα.

  Αξίζουν οι οθόνες 4K για γενική χρήση υπολογιστή;

Η εξαγωγή δεδομένων που περιλαμβάνει ετικέτες HTML με το cheerio είναι ένα cakewalk. Πριν μπούμε στα πραγματικά δεδομένα, ας δούμε μερικά δείγματα ανάλυσης δεδομένων χρησιμοποιώντας το cheerio.

  • Αναλύστε τα δεδομένα HTML χρησιμοποιώντας τη μέθοδο cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Έχουμε αναλύσει τον παραπάνω κώδικα HTML. Πώς να εξαγάγετε το περιεχόμενο της ετικέτας p από αυτό; Είναι το ίδιο με τους επιλογείς στον χειρισμό JavaScript DOM.

console.log(parsedSampleData(“#title”).text());

Μπορείτε να επιλέξετε τις ετικέτες όπως θέλετε. Μπορείτε να ελέγξετε διαφορετικές μεθόδους από το επίσημος ιστότοπος cheerio.

  • Τώρα, ήρθε η ώρα να εξαγάγετε τη λίστα του Μουντιάλ. Για να εξαγάγουμε τις πληροφορίες, πρέπει να γνωρίζουμε τις ετικέτες HTML που βρίσκονται οι πληροφορίες στη σελίδα. μεταβείτε στο Παγκόσμιο Κύπελλο κρίκετ σελίδα Wikipedia και επιθεωρήστε τη σελίδα για να λάβετε πληροφορίες ετικετών HTML.

Εδώ είναι ο πλήρης κώδικας.

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

Και, εδώ είναι τα αποξεσμένα δεδομένα.

Year --- Winner --- Runner
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Ωραίο 😎, δεν είναι;

  Πώς να μετρήσετε τα βήματα στο iPhone και το Apple Watch

Πρότυπο απόξεσης

Η λήψη των ακατέργαστων δεδομένων από τη διεύθυνση URL είναι συνηθισμένη σε κάθε έργο απόξεσης ιστού. Το μόνο μέρος που αλλάζει είναι η εξαγωγή των δεδομένων σύμφωνα με την απαίτηση. Μπορείτε να δοκιμάσετε τον παρακάτω κώδικα ως πρότυπο.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

συμπέρασμα

Έχετε μάθει πώς να ξύνετε μια ιστοσελίδα. Τώρα, είναι η σειρά σας να εξασκηθείτε στην κωδικοποίηση.

Θα πρότεινα επίσης να ελέγξετε τα δημοφιλή πλαίσια απόξεσης ιστού για εξερεύνηση και τις λύσεις απόξεσης ιστού που βασίζονται σε σύννεφο.

Καλή κωδικοποίηση 🙂

Σας άρεσε να διαβάζετε το άρθρο; Τι θα λέγατε να μοιράζεστε με τον κόσμο;