كيفية تجريف الويب باستخدام JavaScript: دليل Node.js

يشرح هذا الدليل كيفية تجريف الويب باستخدام JavaScript وبيئة Node.js، وهي بيئة التشغيل التي يلجأ إليها معظم المهندسين عندما يريدون جمع البيانات العامة على نطاق واسع. ويعني تعلم تجريف الويب باستخدام JavaScript اختيار الأداة المناسبة للصفحة: عميل HTTP خفيف لصفحات HTML الثابتة، أو متصفح بلا واجهة للمحتوى الذي يُحمّل عبر البرامج النصية.

ستجد أدناه تعليمات Node.js برمجية عاملة وقابلة للتشغيل لكلتا الحالتين، إلى جانب إعداد المشروع والتصدير المنظم إلى JSON وCSV وتقسيم الصفحات وإعادة المحاولة مع التراجع التدريجي وتحديد المعدل ومصادقة البروكسي واعتراض XHR ومسائل الأخلاقيات والحجب التي تحدد ما إذا كانت أداة التجريف ستواصل العمل بمرور الوقت.

DataImpulse مزود بروكسيات أخلاقي يقدم أكثر من 90 مليون عنوان IP سكني ومحمول ومن مراكز البيانات في 195 دولة. ويستخدم نموذج الدفع حسب الاستخدام بدءاً من 1 دولار لكل GB مع حركة مرور لا تنتهي صلاحيتها، ويُستخدم لتجريف الويب والتحقق من الإعلانات ومراقبة الأسعار وأبحاث السوق وإدارة الحسابات المتعددة.

ما هو تجريف الويب باستخدام JavaScript؟

تجريف الويب باستخدام JavaScript هو عملية طلب صفحات الويب برمجياً واستخراج بيانات منظمة منها عبر JavaScript، وعادةً ما تُشغّل على بيئة Node.js بدلاً من تشغيلها داخل علامة تبويب في المتصفح.

تُعد JavaScript مناسبة بطبيعتها لأن اللغة تمثل بالفعل نموذج كائن المستند، لذا يبدو اختيار العناصر مألوفاً لمطوري الواجهة الأمامية. عملياً، تنفذ أداة التجريف ثلاثة أمور: تجلب صفحة عبر HTTP، وتحلل الترميز المعاد إلى شجرة قابلة للاستعلام، وتستخرج الحقول المهمة مثل العناوين والأسعار والروابط. وينشأ التعقيد من طريقة تسليم الصفحة المستهدفة لبياناتها، لذلك يهم اختيار الأداة الصحيحة أكثر من التحليل نفسه. ترسل الصفحات الثابتة بياناتها في استجابة HTML الأولى، في حين تجمع الصفحات الديناميكية بياناتها في المتصفح بعد التحميل، وتتطلب الحالتان سلسلتي أدوات مختلفتين.

كيف تُعد مشروع تجريف باستخدام Node.js؟

أنشئ مجلداً للمشروع، وهيئه باستخدام npm، وثبت المكتبات التي تحتاجها قبل كتابة أي تعليمات برمجية للتجريف.

يتضمن Node.js 18 والإصدارات الأحدث fetch عاماً مدمجاً، لذا لا تحتاج إلى مكتبة HTTP لطلبات GET البسيطة، رغم أن كثيراً من الفرق لا تزال تفضل axios لما يوفره من اعتراضات ومعالجة للبروكسي. تنشئ الأوامر أدناه مشروعاً وتثبت cheerio للتحليل وaxios كعميل بديل وp-limit للتحكم في التزامن وPuppeteer وPlaywright للصفحات الديناميكية:

mkdir js-scraper && cd js-scraper
npm init -y
npm install cheerio axios p-limit
npm install puppeteer playwright

# enable modern import syntax
npm pkg set type=module

يتيح ضبط type=module استخدام عبارات import. إذا كنت تفضل CommonJS، فأبقِ الإعداد الافتراضي واستخدم require بدلاً منه. تستخدم أمثلة هذا الدليل صياغة import، لكن كل مثال يقابل مباشرة استدعاء require. عند انتهاء التثبيت، سيكون لديك كل ما يلزم للتجريف الثابت والديناميكي في مشروع واحد.

كيف تُجرف صفحة ثابتة باستخدام fetch وcheerio؟

بالنسبة إلى الصفحات الثابتة، نزّل HTML بدالة fetch المدمجة وحلله باستخدام cheerio، التي توفر لك API بأسلوب jQuery على الخادم.

تعيد الصفحات الثابتة محتواها مباشرةً في استجابة HTML الأولية، لذا لا تحتاج إلى عرض في المتصفح. هذا النهج سريع واقتصادي لأنك تنزّل الترميز فقط، لا الصور أو الخطوط أو البرامج النصية. يجلب المثال أدناه صفحة ويحملها في cheerio ويقرأ كل بطاقة منتج:

import * as cheerio from 'cheerio';

async function scrape(url) {
  const res = await fetch(url, {
    headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
  });
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  const html = await res.text();
  const $ = cheerio.load(html);

  const items = [];
  $('.product').each((i, el) => {
    items.push({
      title: $(el).find('h2').text().trim(),
      price: $(el).find('.price').text().trim(),
      link: $(el).find('a').attr('href')
    });
  });
  return items;
}

console.log(await scrape('https://example.com/catalog'));

إذا كنت تفضل axios، فإن جزء التحليل متطابق ولا يتغير إلا الطلب. يطلق Axios خطأً تلقائياً عند رموز الحالة غير 2xx، ويجعل إعداد البروكسي مباشراً، ولهذا تستخدمه كثير من أدوات التجريف الإنتاجية:

import axios from 'axios';
import * as cheerio from 'cheerio';

const { data: html } = await axios.get('https://example.com/catalog', {
  headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' },
  timeout: 15000
});
const $ = cheerio.load(html);
const titles = $('.product h2').map((i, el) => $(el).text().trim()).get();
console.log(titles);

قبل توجيه أداة تجريف إلى أي موقع، يجدر التأكد من أن الموقع المستهدف يسمح بذلك. يشرح دليلنا حول كيفية التحقق مما إذا كان موقع الويب يسمح بالتجريف ملف robots.txt وشروط الخدمة.

كيف تستخرج بيانات منظمة إلى JSON وCSV؟

اجمع كل سجل في مصفوفة من الكائنات العادية، ثم اكتب تلك المصفوفة في ملف JSON، أو سطّحها إلى صفوف مفصولة بفواصل لملف CSV.

لا يصبح النص الخام المجلوب مفيداً إلا بعد تخزينه في بنية متوقعة. يمثل JSON أبسط هدف لأن مصفوفة JavaScript تُسلسل مباشرةً. يكتب المقتطف أدناه العناصر المجلوبة إلى القرص باستخدام وحدة نظام الملفات المدمجة:

import { writeFile } from 'node:fs/promises';

const items = await scrape('https://example.com/catalog');
await writeFile('products.json', JSON.stringify(items, null, 2), 'utf-8');
console.log(`Saved ${items.length} records to products.json`);

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

import { writeFile } from 'node:fs/promises';

function toCsv(rows) {
  const headers = Object.keys(rows[0]);
  const escape = (v) => `"${String(v ?? '').replace(/"/g, '""')}"`;
  const lines = [headers.join(',')];
  for (const row of rows) {
    lines.push(headers.map((h) => escape(row[h])).join(','));
  }
  return lines.join('\n');
}

const items = await scrape('https://example.com/catalog');
await writeFile('products.csv', toCsv(items), 'utf-8');

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

كيف تُجرف صفحات متعددة مع تقسيم الصفحات؟

كرّر عبر عناوين URL لصفحات الموقع أو اتبع رابط الصفحة التالية في كل صفحة، وجرف كل واحدة منها وتوقف عندما لا تعود هناك نتائج.

تقسم معظم الكتالوجات النتائج عبر صفحات مرقمة باستخدام معلمة استعلام مثل ?page=2، أو تعرض رابطاً تالياً. يقرأ النمط الأكثر أماناً كل صفحة ويجمع سجلاتها، ثم يبحث عن الصفحة التالية ويتوقف عند غيابها. ينتقل المثال أدناه عبر الصفحات المرقمة حتى تعيد صفحة بلا عناصر:

import * as cheerio from 'cheerio';

async function scrapeAll(base) {
  const all = [];
  for (let page = 1; page <= 50; page++) {
    const res = await fetch(`${base}?page=${page}`, {
      headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
    });
    if (!res.ok) break;
    const $ = cheerio.load(await res.text());
    const items = $('.product').map((i, el) => ({
      title: $(el).find('h2').text().trim(),
      price: $(el).find('.price').text().trim()
    })).get();

    if (items.length === 0) break;
    all.push(...items);
    await new Promise((r) => setTimeout(r, 1000));
  }
  return all;
}

console.log((await scrapeAll('https://example.com/catalog')).length);

لاحظ فترة التوقف البالغة ثانية واحدة بين الصفحات والحد الصارم البالغ 50 تكراراً، والذي يمنع حلقة منفلتة إذا لم يُرجع الموقع صفحة فارغة أبداً. عندما يُحمّل المحتوى بالتمرير بدلاً من الصفحات المرقمة، ستحتاج إلى متصفح بلا واجهة، وهو ما يغطيه قسم Puppeteer أدناه.

كيف تتعامل مع إعادة المحاولة والتراجع التدريجي وتحديد المعدل؟

غلّف كل طلب بمساعد لإعادة المحاولة ينتظر وقتاً أطول بعد كل فشل، وضع حداً لعدد الطلبات التي تعمل معاً كي تبقى ضمن قدرة الموقع على التحمل.

الشبكات غير موثوقة وقد تعيد الخوادم أخطاء عابرة، لذا فإن أداة تجريف تستسلم عند الفشل الأول تفقد البيانات بلا داعٍ. ينتظر مساعد إعادة المحاولة ذي التراجع الأسي وقتاً أطول تدريجياً بين المحاولات، ما يمنح الخادم المقيّد بالمعدل وقتاً للتعافي:

async function fetchWithRetry(fn, retries = 4, delay = 1000) {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      return await fn();
    } catch (err) {
      if (attempt === retries) throw err;
      const wait = delay * 2 ** (attempt - 1);
      console.warn(`Attempt ${attempt} failed, retrying in ${wait}ms`);
      await new Promise((r) => setTimeout(r, wait));
    }
  }
}

const html = await fetchWithRetry(async () => {
  const res = await fetch('https://example.com/catalog');
  if (res.status === 429) throw new Error('Rate limited');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.text();
});

يعالج التراجع التدريجي الطلبات المفردة، لكن عليك أيضاً التحكم في عدد الطلبات المتوازية. يؤدي إرسال مئات الطلبات المتزامنة إلى إضعاف الخادم المستهدف ووضع علامة على حركة مرورك. تضع مكتبة p-limit حداً للتزامن كي يعالج عدد ثابت من العمال طابوراً من عناوين URL:

import pLimit from 'p-limit';

const limit = pLimit(5); // at most 5 requests in flight
const urls = Array.from({ length: 100 }, (_, i) =>
  `https://example.com/item/${i + 1}`
);

const results = await Promise.all(
  urls.map((url) =>
    limit(() => fetchWithRetry(async () => {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.text();
    }))
  )
);

console.log(`Fetched ${results.length} pages with a cap of 5 in parallel`);

معاً، يحافظ التراجع التدريجي وحد التزامن على أثر معقول ومعدل نجاح مرتفع. وللاطلاع على قائمة تحقق أوسع، راجع دليلنا عن أفضل ممارسات تجريف الويب.

كيف تُجرف صفحات ديناميكية باستخدام Puppeteer؟

بالنسبة إلى الصفحات الديناميكية التي تبني المحتوى باستخدام JavaScript بعد التحميل، شغّل Chrome بلا واجهة عبر Puppeteer، وانتظر المحدد المستهدف واقرأ DOM المعروض كاملاً.

تعيد مواقع حديثة كثيرة هيكلاً شبه فارغ من HTML ثم تجلب البيانات عبر طلبات في الخلفية. لا يرى عميل HTTP شيئاً مفيداً، لذا تحتاج إلى محرك يشغّل JavaScript الخاص بالصفحة. يتحكم Puppeteer في Chrome بلا واجهة ويمكنه انتظار العناصر والنقر والتمرير. ينتظر المثال أدناه محدداً، ثم يمرر مراراً لتشغيل تحميل التمرير اللانهائي قبل استخراج البيانات ضمن سياق المتصفح:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (compatible; MyScraper/1.0)');
await page.goto('https://example.com/feed', { waitUntil: 'networkidle2' });

// wait until the first batch of cards is present
await page.waitForSelector('.product');

// infinite scroll: scroll to the bottom until height stops growing
let previousHeight = 0;
for (let i = 0; i < 20; i++) {
  const height = await page.evaluate('document.body.scrollHeight');
  if (height === previousHeight) break;
  previousHeight = height;
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await new Promise((r) => setTimeout(r, 1500));
}

const items = await page.evaluate(() =>
  Array.from(document.querySelectorAll('.product')).map((el) => ({
    title: el.querySelector('h2')?.innerText.trim(),
    price: el.querySelector('.price')?.innerText.trim()
  }))
);

console.log(`Extracted ${items.length} items`);
await browser.close();

تتوقف الحلقة فور توقف ارتفاع الصفحة عن الزيادة، ما يشير إلى عدم تحميل محتوى جديد، ويمنع الحد الصارم البالغ 20 تمريراً حلقة لا نهائية. ولمزيد حول هذه الفئة من الأهداف، راجع دليلنا حول كيفية تجريف صفحات ويب ديناميكية.

كيف تستخدم Playwright بديلاً لـ Puppeteer؟

يعمل Playwright بصورة تكاد تطابق Puppeteer، لكنه يضيف دعماً أصيلاً لـ Chromium وFirefox وWebKit، إلى جانب محددات تنتظر تلقائياً وتقلل المحددات غير المستقرة.

طوّر Playwright بعض مهندسي Puppeteer الأصليين، وهو يشارك معظم API الخاص به، لذا تكون الترحيل عادة مسألة إعادة تسمية بضعة استدعاءات. تنتظر محدداته تلقائياً حتى تصبح العناصر قابلة للتفاعل، ما يلغي كثيراً من استدعاءات waitForSelector اليدوية. تبدو أداة التجريف المكافئة كما يلي:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  userAgent: 'Mozilla/5.0 (compatible; MyScraper/1.0)'
});
const page = await context.newPage();
await page.goto('https://example.com/feed', { waitUntil: 'networkidle' });

await page.locator('.product').first().waitFor();

const items = await page.locator('.product').evaluateAll((els) =>
  els.map((el) => ({
    title: el.querySelector('h2')?.innerText.trim(),
    price: el.querySelector('.price')?.innerText.trim()
  }))
);

console.log(`Extracted ${items.length} items`);
await browser.close();

اختر Playwright عندما تحتاج إلى اختبار أداة التجريف نفسها عبر محركات متصفحات متعددة أو تريد محاكاة الشبكة المدمجة فيه. اختر Puppeteer عندما تستهدف Chrome فقط وتريد تبعية أصغر. يستهلك كلاهما ذاكرة أكبر بكثير من fetch وcheerio، لذا احتفظ بهما للصفحات التي تتطلب العرض فعلاً.

أي أداة لتجريف JavaScript ينبغي أن تختار؟

استخدم fetch أو axios مع cheerio لصفحات HTML الثابتة، ولا تلجأ إلى Puppeteer أو Playwright إلا عندما تعرض الصفحة بياناتها في المتصفح.

تعتمد الأداة المناسبة على كيفية تسليم الصفحة للبيانات ومدى تفضيلك السرعة على دقة العرض. عملاء HTTP سريعة وخفيفة لكنها لا تشغّل JavaScript، بينما تشغّل المتصفحات بلا واجهة كل ما يراه المستخدم الحقيقي لكنها تستهلك ذاكرة ووقتاً أكبر. يلخص الجدول أدناه المفاضلات:

يجمع نمط إنتاجي شائع بين النهجين: استخدم متصفحاً بلا واجهة فقط للوصول إلى الصفحات أو نقاط النهاية التي تحتاج إلى عرض، ثم ارجع إلى عميل HTTP عادي لمعظم الطلبات. تمثل JavaScript واحدة من عدة حزم قابلة للاستخدام لهذا العمل، وإذا كنت تقارن بين البيئات، فإن دليلنا عن تجريف الويب باستخدام Rust يغطي بديلاً مترجماً.

كيف تمرر أدوات تجريف JavaScript عبر بروكسي؟

مرر إعدادات البروكسي إلى عميل HTTP أو خيارات تشغيل المتصفح كي تخرج الطلبات من عنوان IP مختلف، ما يوزع الحمل ويقلل احتمال تقييد عنوان واحد بالمعدل.

إن تجريف صفحات كثيرة من عنوان IP واحد هو أسرع طريق إلى الحجب. يجعل تدوير الطلبات عبر مجموعة من العناوين حركة المرور تبدو كأنها من زوار منفصلين كُثر. مع axios، تزود إعداد الطلب بمضيف البروكسي والمنفذ وبيانات الاعتماد. يمرر المثال أدناه عبر بوابة DataImpulse:

import axios from 'axios';

const { data } = await axios.get('https://example.com', {
  proxy: {
    protocol: 'http',
    host: 'gw.dataimpulse.com',
    port: 823,
    auth: { username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }
  },
  headers: { 'User-Agent': 'Mozilla/5.0 (compatible; MyScraper/1.0)' }
});
console.log(data.length, 'bytes received through the proxy');

يأخذ Puppeteer البروكسي كوسيط تشغيل ثم يصادق في الصفحة، لأن Chrome لا يقبل بيانات الاعتماد داخل URL الخاص بالبروكسي. والنمط نفسه في Playwright، الذي يقبل كائن بروكسي باسم مستخدم وكلمة مرور مباشرةً:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  args: ['--proxy-server=gw.dataimpulse.com:823']
});
const page = await browser.newPage();
await page.authenticate({
  username: 'YOUR_USERNAME',
  password: 'YOUR_PASSWORD'
});
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
console.log(await page.title());
await browser.close();

تقدم DataImpulse بروكسيات سكنية, بروكسيات مراكز بيانات، وبروكسيات محمولة عبر HTTP وHTTPS وSOCKS5، مع جلسات متناوبة وثابتة. يتضمن العرض الاستهداف حسب الدولة، بينما تمثل خيارات الاستهداف حسب الولاية والمدينة وZIP وASN إضافات مدفوعة. إذا أعاد طلب بروكسي خطأ مصادقة، فإن ملاحظتنا عن خطأ HTTP 407 تشرح السبب الأكثر شيوعاً، كما يغطي دليلنا عن مصادقة البروكسي تنسيقات بيانات الاعتماد بمزيد من التفصيل.

كيف تعترض XHR ونقاط نهاية JSON؟

بدلاً من تجريف HTML المعروض، راقب حركة المرور على الشبكة في متصفح بلا واجهة واقرأ استجابات JSON التي تجلبها الصفحة في الخلفية، وهو ما يكون أنظف وأسرع غالباً.

تحصل الصفحات الديناميكية عادةً على بياناتها من API مخفي يعيد JSON. تقرأ هذه الاستجابة مباشرةً فتتجاوز تحليل DOM كلياً وتحصل على سجلات منظمة جيداً. يتيح لك كل من Puppeteer وPlaywright الاستماع إلى الاستجابات والتقاط ما تريده منها. يلتقط مثال Puppeteer أدناه أي استجابة JSON من مسار API:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();

const captured = [];
page.on('response', async (response) => {
  const url = response.url();
  if (url.includes('/api/') && response.headers()['content-type']?.includes('application/json')) {
    try {
      captured.push(await response.json());
    } catch (err) {
      // non-JSON body, ignore
    }
  }
});

await page.goto('https://example.com/feed', { waitUntil: 'networkidle2' });
console.log(`Captured ${captured.length} JSON payloads`);
await browser.close();

بمجرد معرفة URL نقطة النهاية ومعلماتها، يمكنك غالباً الاستغناء عن المتصفح تماماً واستدعاء JSON API باستخدام fetch العادي مع تمرير الترويسات نفسها التي أرسلتها الصفحة. يمنحك ذلك سرعة أداة التجريف الثابتة واكتمال الأداة المعروضة، وهو أكبر مكسب أداء متاح للصفحات الديناميكية.

ما أخلاقيات التجريف وحدوده القانونية؟

جرف البيانات العامة فقط، واحترم ملف robots.txt وشروط خدمة الموقع، وتجنب البيانات الشخصية، ولا تُحمّل الخادم فوق طاقته أبداً. تحافظ هذه الممارسات على مشروعك قابلاً للدفاع عنه ومستداماً في آن واحد.

تحقق من ملف robots.txt في جذر النطاق لمعرفة المسارات التي يطلب الموقع من أدوات الزحف تجنبها، وتعامل مع هذه الطلبات بجدية. عرّف أداة التجريف الخاصة بك عبر User-Agent صادق، وحدد طلباتك بالمعدل وخزّن الاستجابات مؤقتاً كي لا تعيد جلب الصفحة نفسها بلا حاجة. وعلى صعيد البنية التحتية، يهم مصدر عناوين IP الخاصة بك. تدير DataImpulse بروكسيات أخلاقية من مستخدمين يوافقون طوعاً ويتلقون مقابلاً، وبما يتوافق مع GDPR، مع توفير اتفاقية لمعالجة البيانات. ليست الأخلاقيات مسألة امتثال فحسب، فأدوات التجريف المهذبة والشفافة هي أيضاً التي تواصل العمل. ولمبادئ الجمع المستدام، راجع دليلنا عن تجريف الويب الأخلاقي.

الأسئلة الشائعة

أدلة ذات صلة

• تجريف صفحات ويب ديناميكية
• تجريف الويب باستخدام Rust
• تجريف الصور من موقع ويب

ابدأ التجريف ببروكسيات موثوقة

هل أنت مستعد لمواصلة تشغيل أدوات تجريف JavaScript من دون حجب متكرر؟ تمنحك DataImpulse عناوين IP سكنية ومحمولة ومن مراكز البيانات من مصادر أخلاقية، بدءاً من 1 دولار لكل GB، مع حركة مرور لا تنتهي صلاحيتها ومن دون اشتراك. أنشئ حساباً ومرر أول أداة تجريف لديك عبر بروكسي اليوم.