دعونا نتحدث عن كيفية التقاط البيانات باستخدام Node.js + Cheerio

قبل أن نبدأ، يتعين عليك الالتزام بالقوانين واللوائح المحلية، وعدم حذف البيانات التي يتم الكشف عنها دون إذن.

المتطلبات الأساسية

إليك بعض الأشياء التي ستحتاجها لهذا البرنامج التعليمي:

• تحتاج إلى تثبيت Node.js. إذا لم يكن لديك Node، فقط تأكد من تنزيله لنظامك من صفحة تنزيل Node.js (https://nodejs.dev/download/)
• ستحتاج إلى تثبيت محرر نصوص على جهازك، مثل باعتبارك VSCode أو Atom
• ، يجب أن يكون لديك على الأقل فهم أساسي لـ JavaScript وNode.js ونموذج كائن المستند (DOM).

ما هو تشيريو؟

Cheerio هي أداة لتحليل HTML وXML في Node.js، وهي تحظى بشعبية كبيرة على GitHub ولديها أكثر من 23 ألف نجمة.

إنه سريع ومرن وسهل الاستخدام. نظرًا لأنه ينفذ مجموعة فرعية من JQuery، فمن السهل البدء باستخدام Cheerio إذا كنت معتادًا على JQuery بالفعل.

يتمثل الاختلاف الرئيسي بين Cheerio ومتصفح الويب في أن Cheerio لا يقوم بإنشاء عرض مرئي، أو تحميل CSS، أو تحميل موارد خارجية، أو تنفيذ JavaScript. فهو يقوم فقط بتحليل العلامات وتوفير واجهة برمجة التطبيقات (API) لمعالجة هياكل البيانات الناتجة. وهذا ما يفسر سبب سرعته الكبيرة أيضًا - توثيق البهجة.

إذا كنت تريد استخدام Cherio لجلب صفحات الويب، فأنت بحاجة أولاً إلى استخدام حزمة مثل axios أو Node-fetch للحصول على العلامات.

كيفية الزحف إلى صفحات الويب في Node باستخدام Cheerio

في هذا المثال، سنقوم بالزحف إلى رموز ISO 3166-1 alpha-3 لجميع البلدان والولايات القضائية الأخرى المدرجة في صفحة ويكيبيديا هذه. إنه موجود ضمن قسم الكود الحالي في صفحة ISO 3166-1 alpha-3.

هذا ما تبدو عليه قائمة البلدان/السلطات القضائية والرموز المقابلة لها:

الخطوة 1 - إنشاء دليل عمل

في هذه الخطوة، ستقوم بإنشاء دليل لمشروعك عن طريق تشغيل الأمر التالي على الوحدة الطرفية. سيقوم هذا الأمر بإنشاء ملف باسم learn-cheerio ، ويمكنك إعطاؤه اسمًا مختلفًا إذا كنت ترغب في ذلك.

mkdir learn-cheerio

learn-cheerio بعد تشغيل الأمر أعلاه بنجاح، يجب أن تكون قادرًا على رؤية المجلد المسمى الذي تم إنشاؤه.

في الخطوة التالية، ستفتح الدليل الذي أنشأته للتو في محرر النصوص المفضل لديك وتبدأ المشروع.

الخطوة 2 - تهيئة المشروع

في هذه الخطوة، ستنتقل إلى دليل المشروع وتقوم بتهيئة المشروع. افتح الدليل الذي قمت بإنشائه في الخطوة السابقة في محرر النصوص المفضل لديك وقم بتهيئة المشروع عن طريق تشغيل الأمر التالي.

npm init -y

سيؤدي التشغيل الناجح للأمر أعلاه إلى إنشاء ملف package.json في جذر دليل المشروع.

في الخطوة التالية، ستقوم بتثبيت تبعيات المشروع.

الخطوة 3 - تثبيت التبعيات

في هذه الخطوة، ستقوم بتثبيت تبعيات المشروع عن طريق تشغيل الأمر التالي. سيستغرق هذا بضع دقائق، لذا يرجى التحلي بالصبر.

npm i axios Cherio beautiful

سيؤدي تشغيل الأمر أعلاه بنجاح إلى تسجيل ثلاث تبعيات في الملف ضمن الحقل package.json . dependencies التبعية الأولى هي axios ، والثانية هي cheerio ، والثالثة pretty .

Axios هو عميل http شائع جدًا ويمكن تشغيله في العقدة والمتصفحات. نحن في حاجة إليها لأن تشيريو هو محلل رمزي.

لكي يتمكن Cheerio من تحليل العلامات والزحف إلى البيانات التي تحتاجها، نحتاج إلى axios للحصول على العلامات من موقع الويب. إذا كنت تفضل ذلك، يمكنك استخدام عميل HTTP آخر للحصول على الرمز المميز. ليس من الضروري أن تكون axios

جميلة هي حزمة npm لتجميل العلامات بحيث يمكن قراءتها عند طباعتها على الجهاز.

في القسم التالي، ستقوم بفحص العلامات التي سيتم استخراج البيانات منها.

الخطوة 4 - التحقق من صفحة الويب التي تريد استخراجها

قبل استخراج البيانات من صفحة الويب، من المهم فهم بنية HTML للصفحة.

في هذه الخطوة، تقوم بفحص بنية HTML لصفحة الويب التي تريد استخراج البيانات منها.

انتقل إلى صفحة رموز ISO 3166-1 alpha-3 على ويكيبيديا. ضمن قسم "الرموز الحالية"، توجد قائمة بالدول والرموز المقابلة لها. CTRL + SHIFT + I يمكنك فتح DevTools بالضغط على مجموعة المفاتيح الموجودة في chrome أو بالنقر بزر الماوس الأيمن وتحديد خيار "Inspect".

هذه هي قائمتي في chrome DevTools:

في القسم التالي، ستكتب الرمز للزحف إلى الويب.

الخطوة 5 - كتابة الكود لاستخراج البيانات

في هذا القسم، ستكتب الكود لاستخراج البيانات التي نهتم بها. قم أولاً بتشغيل الأمر التالي الذي سيقوم بإنشاء ملف app.js

المس app.js

سيؤدي تشغيل الأمر أعلاه بنجاح إلى إنشاء ملف app.js في الدليل الجذر لدليل المشروع.

مثل أي حزمة عقدة أخرى، يجب عليك أولاً طلب axios و cheerio وaxios قبل البدء في استخدامها. يمكنك القيام بذلك عن طريق إضافة الكود التالي في أعلى الملف pretty قمت بإنشائه للتو . app.js

const axios = require("axios");
const Cheerio = require("cheerio");
const beautiful = require("pretty");

قبل أن نكتب الكود الخاص باستخراج البيانات، نحتاج إلى تعلم cheerio . وسنقوم بتحليل العلامات أدناه ومحاولة التعامل مع بنية البيانات الناتجة. سيساعدنا هذا في تعلم بناء جملة Cheerio وأساليبه الأكثر استخدامًا.

الترميز أدناه هو عنصر ul li الذي يحتوي على العنصر الخاص بنا.

ترميز ثابت = `
<ul class="الفواكه">
  <li class="fruits__mango"> مانجو </li>
  <li class="fruits__apple"> تفاحة </li>
</ul>
`;

أضف تعريف المتغير أعلاه إلى ملف app.js

كيفية تحميل العلامات في Cheerio Cheerio

cheerio تحميل العلامات باستخدام طريقة cheerio.load . تأخذ هذه الطريقة العلامة كمعلمة. كما يتطلب أيضًا معلمتين اختياريتين إضافيتين. إذا كنت مهتمًا، يمكنك قراءة المزيد عنها في الوثائق.

أدناه، نمرر المعلمة الأولى والمطلوبة فقط ونخزن القيمة المرجعة في المتغير $ . نحن نستخدم هذا المتغير بسبب تشابه Cherio مع Jquery $ . يمكنك استخدام أسماء متغيرة مختلفة إذا كنت ترغب في ذلك.

أضف الكود التالي إلى ملف app.js الخاص بك:

const $ = Cherio.load(markup);
console.log(pretty($.html()));

إذا قمت الآن بتنفيذ التعليمات البرمجية في node app.js عن طريق تشغيل الأمر app.js على الجهاز، فيجب أن تكون قادرًا على رؤية الترميز على الجهاز. هذا ما أراه على المحطة:

كيفية تحديد العناصر في Cheerio

يدعم Cheerio معظم محددات CSS الشائعة، مثل محددات class id element . في الكود أدناه، نختار عنصرًا بالفئة fruits__mango ثم نقوم بتسجيل العنصر المحدد في وحدة التحكم. أضف الكود التالي إلى ملف app.js الخاص بك.

const mango = $(".fruits__mango");
console.log(mango.html()); // Mango

إذا كنت تستخدم تنفيذ الأمر، فإن سطر التعليمات البرمجية أعلاه سوف يقوم Mango بتسجيل النص على الجهاز. app.js``node app.js

كيفية الحصول على سمات عنصر في Cheerio

يمكنك أيضًا تحديد عنصر والحصول على سمات محددة مثل class أو id أو جميع السمات والقيم المقابلة لها.

أضف الكود التالي إلى ملف app.js الخاص بك:

const apple = $(".fruits__apple");
console.log(apple.attr("class")); //

الكود الموجود بالأعلى Fruit__apple سوف يقوم بتسجيل الدخول إلى fruits__apple Terminal. fruits__apple هي فئة العنصر المحدد.

كيفية التكرار عبر قائمة العناصر في Cheerio

يوفر Cheerio طريقة .each للتكرار عبر عناصر متعددة محددة.

أدناه، نختار جميع العناصر ونمرّرها باستخدام الطريقة li . .each بتسجيل المحتوى النصي لكل عنصر قائمة على الجهاز.

أضف الكود التالي إلى ملف app.js الخاص بك.

const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
  console.log($(el).text());
});
//مانجو
//

سيسجل كود Apple أعلاه 2 ، وهو طول عنصر القائمة. بعد تنفيذ الكود، سيتم عرض نص Mango على الجهاز. Apple``app.js

كيفية إلحاق العناصر أو إضافتها إلى العلامات في Cheerio

يوفر Cheerio طريقة لإلحاق العناصر أو إلحاقها بالعلامات.

ستقوم طريقة append بإلحاق العنصر الذي تم تمريره كمعلمة بعد العنصر الفرعي الأخير للعنصر المحدد. من ناحية أخرى، ستضيف prepend العنصر الذي تم تمريره قبل الطفل الأول للعنصر المحدد.

أضف الكود التالي إلى ملف app.js الخاص بك:

const ul = $("ul");
ul.append("<li>موز</li>");
ul.prepend("<li>أناناس</li>");
console.log(pretty($.html()));

بعد إضافة العناصر وإضافتها إلى الترميز، هذا ما أراه عندما أقوم بتسجيل الدخول إلى المحطة الطرفية $.html() :

هذه هي أساسيات Cheerio لتبدأ في تجريف الويب. لاستخراج البيانات من ويكيبيديا التي وصفناها في بداية هذه المقالة، انسخ الكود التالي والصقه في ملف app.js :

// تحميل التبعيات لا نحتاج إلى جميلة
// لأننا لن نقوم بتسجيل HTML إلى المحطة
const axios = require("axios");
const Cheerio = require("cheerio");
const fs = require("fs");

// عنوان URL للصفحة التي نريد استخلاصها
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";

// وظيفة غير متزامنة تقوم بمسح البيانات
وظيفة غير متزامنة سكراباتا () {
  يحاول {
    // جلب HTML للصفحة التي نريد استخلاصها
    const { data } = انتظار axios.get(url);
    // قم بتحميل HTML الذي جلبناه في السطر السابق
    const $ = Cherio.load(data);
    // حدد كافة عناصر القائمة في فئة القائمة العادية
    const listItems = $(".plainlist ul li");
    // يخزن البيانات لجميع البلدان
    الدول الثابتة = []؛
    // استخدم طريقة .each للتنقل عبر الرابط الذي اخترناه
    listItems.each((idx, el) => {
      // كائن يحمل بيانات لكل بلد/ولاية قضائية
      بلد ثابت = { الاسم: ""، iso3: "" }؛
      // حدد محتوى النص لعناصر الامتداد
      // قم بتخزين محتوى النص في الكائن أعلاه
      Country.name = $(el).children("a").text();
      Country.iso3 = $(el).children("span").text();
      // تعبئة مصفوفة البلدان ببيانات الدولة
      countries.push(country);
    });
    // يسجل مصفوفة البلدان إلى وحدة التحكم
    console.dir(countries);
    // اكتب مصفوفة البلدان في ملفcountries.json
    fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
      إذا (يخطئ) {
        console.error(err);
        يعود؛
      }
      console.log("تم كتابة البيانات إلى الملف بنجاح");
    });
  } مسك (يخطئ) {
    console.error(err);
  }
}
// استدعاء الوظيفة المذكورة أعلاه
ScrapeData();

من خلال قراءة الكود، هل تفهم ما يحدث؟ إذا لم يكن الأمر كذلك، فسوف أخوض في التفاصيل الآن. لقد قمت أيضًا بالتعليق على كل سطر من التعليمات البرمجية لمساعدتك على الفهم.

في الكود أعلاه، نحتاج إلى جميع التبعيات في الجزء العلوي من الملف app.js ثم نعلن عن وظيفة scrapeData . داخل الوظيفة، يتم بعد ذلك تحميل HTML الذي تم جلبه للصفحة التي نحتاج إلى استخراجها إلى cheerio باستخدام axios .

ويتم تضمين قائمة البلدان ورموز iso3 المقابلة لها في عنصر div مع plainlist للفئة. يتم تحديد عناصر li ثم نقوم بالتمرير عبرها باستخدام الطريقة .each . يتم جمع البيانات الخاصة بكل بلد وتخزينها في مصفوفة.

بعد تشغيل الكود أعلاه باستخدام أمر node app.js ، تتم كتابة البيانات التي تم التقاطها في ملف countries.json وطباعتها على الجهاز. هذا جزء مما أراه على المحطة:

الخلاصة

شكرا لك على قراءة هذا المقال! لقد تناولنا بالفعل استخدام cheerio إذا كنت تريد التعمق أكثر وفهم كيفية عمله بشكل كامل، فيمكنك التوجه إلى وثائق Cheerio.