تجريف الويب هو تقنية تجعل من الممكن الحصول على البيانات من موقع ويب معين. تستخدم مواقع الويب HTML لوصف محتواها. إذا كان HTML نظيفًا ودلاليًا ، فمن السهل استخدامه لتحديد موقع البيانات المفيدة.

ستستخدم عادةً مكشطة الويب للحصول على البيانات ومراقبتها وتتبع التغييرات المستقبلية عليها.

مفاهيم jQuery تستحق المعرفة قبل استخدام Cheerio

jQuery هي إحدى حزم JavaScript الأكثر شيوعًا في الوجود. يجعل من السهل العمل مع نموذج كائن المستند (DOM)والتعامل مع الأحداث والرسوم المتحركة والمزيد. Cheerio عبارة عن حزمة لكشط الويب مبنية على قمة jQuery - تشارك نفس بناء الجملة وواجهة برمجة التطبيقات ، مع تسهيل تحليل مستندات HTML أو XML.

قبل أن تتعلم كيفية استخدام Cheerio ، من المهم أن تعرف كيفية تحديد عناصر HTML باستخدام jQuery. لحسن الحظ ، يدعم jQuery معظم محددات CSS3 مما يجعل من السهل الحصول على العناصر من DOM. ألق نظرة على الكود التالي:

$("#container");

في مقطع التعليمات البرمجية أعلاه ، يحدد jQuery العناصر ذات الامتداد

بطاقة تعريف من "الحاوية". سيبدو تطبيق مماثل باستخدام JavaScript قديم عادي كما يلي:

document.querySelectorAll("#container");

بمقارنة آخر كتلتين من الكود ، يمكنك أن ترى أن كتلة التعليمات البرمجية السابقة أسهل في القراءة من الثانية. هذا هو جمال مسج.

يحتوي jQuery أيضًا على طرق مفيدة مثل نص(), لغة البرمجة()، والمزيد مما يجعل من الممكن معالجة عناصر HTML. هناك عدة طرق يمكنك استخدامها لاجتياز DOM ، مثل الأبوين(), إخوة(), السابق ()، و التالي().

ال كل() الطريقة في jQuery تحظى بشعبية كبيرة في العديد من مشاريع Cheerio. يسمح لك بالتكرار على الكائنات والمصفوفات. بناء الجملة لملف كل() الطريقة تبدو كالتالي:

$().each(<arrayorobject>, callback)

في كتلة التعليمات البرمجية أعلاه ، أتصل مرة أخرى يتم تشغيله لكل تكرار من وسيطة المصفوفة أو الكائن.

تحميل HTML مع Cheerio

لبدء تحليل بيانات HTML أو XML باستخدام Cheerio ، يمكنك استخدام ملحق cheerio.load () طريقة. الق نظرة على هذا المثال:

const $ = cheerio.load('
Hello, world!
');
console.log($('h1').text())

يستخدم جزء التعليمات البرمجية هذا jQuery نص() يقوم الأسلوب باسترداد محتوى النص الخاص بامتداد h1 عنصر. الصيغة الكاملة لملف حمولة() الطريقة تبدو كالتالي:

load(content, options, mode)

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

كشط أخبار القراصنة مع Cheerio

الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT.

حان الوقت لدمج كل ما تعلمته حتى الآن وإنشاء مكشطة ويب بسيطة. Hacker News هو موقع شهير لرواد الأعمال والمبتكرين. إنه أيضًا موقع ويب مثالي لتسخير مهاراتك في تجريف الويب لأنه يتم تحميله بسرعة ولديه واجهة بسيطة للغاية ولا يعرض أي إعلانات.

تأكد من أن لديك Node.js و ال مدير حزمة العقدة يعمل على جهازك. أنشئ مجلدًا فارغًا ، ثم قم بإنشاء ملف package.json ملف ، وأضف JSON التالي داخل الملف:

{
"name": "web-scraper",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
 },
"author": "",
"license": "MIT",
"dependencies": {
"cheerio": "^1.0.0-rc.12",
"express": "^4.18.2"
 },
"devDependencies": {
"nodemon": "^3.0.1"
 }
}

بعد القيام بذلك ، افتح Terminal وقم بتشغيل:

npm i

يجب أن يقوم هذا بتثبيت التبعيات الضرورية التي تحتاجها لبناء الكاشطة. تتضمن هذه الحزم Cheerio لتحليل HTML ، و ExpressJS لإنشاء الخادم ، و- كاعتماد للتطوير-Nodemon ، أداة تستمع إلى التغييرات في المشروع وإعادة تشغيل الخادم تلقائيًا.

إعداد الأشياء وإنشاء الوظائف الضرورية

يخترع index.js file ، وفي هذا الملف ، أنشئ متغيرًا ثابتًا يسمى "PORT". تعيين ميناء إلى 5500 (أو أي رقم تختاره) ، ثم قم باستيراد حزم Cheerio و Express على التوالي.

const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();

بعد ذلك ، حدد ثلاثة متغيرات: عنوان url, لغة البرمجة، و انتهى الصفحة. تعيين عنوان url إلى عنوان URL الخاص بأخبار القرصنة.

const url = 'https://news.ycombinator.com';
let html;
let finishedPage;

الآن قم بإنشاء وظيفة تسمى getHeader () التي تعرض بعض HTML التي يجب أن يعرضها المتصفح.

functiongetHeader(){
return`
"display: flex; flex-direction: column; align-items: center;">
"text-transform: capitalize">Scraper News</h1>
"display: flex; gap: 10px; align-items: center;">
"/" id="news" onClick='showLoading()'>Home</a>
"/best" id="best" onClick='showLoading()'>Best</a>
"/newest" id="newest" onClick='showLoading()'>Newest</a>
"/ask" id="ask" onClick='showLoading()'>Ask</a>
"/jobs" id="jobs" onClick='showLoading()'>Jobs</a>
 </div>
class="loading" style="display: none;">Loading...</p>
 </div>
`}

إنشاء وظيفة أخرى getScript () يقوم بإرجاع بعض جافا سكريبت للمتصفح ليتم تشغيله. تأكد من تمرير المتغير يكتب كحجة عندما تسميها.

functiongetScript(type){
return`