اسکرپینگ پایه HTML: قدم‌های نخست

Feb 23, 2025

اسکرپینگ وب ممکن است در ابتدا ترسناک به نظر برسد، اما مانند هر مهارت دیگری، بهتر است از طریق تمرین عملی یاد گرفته شود. در این سه فصل اول، ما مبانی استخراج داده از صفحات HTML استاتیک را بررسی خواهیم کرد.

فصل 1: اسکرپر HTML چاد

سفر ما با ساده‌ترین سناریو ممکن آغاز می‌شود - استخراج متن از یک صفحه HTML پایه. این فصل شما را با مفاهیم کلیدی آشنا می‌کند:

  • ارسال درخواست‌های HTTP برای دریافت صفحات وب
  • بارگذاری محتوای HTML در پارسر
  • انتخاب پایه DOM با استفاده از انتخابگرهای CSS

در حالی که مثال ممکن است بی‌اهمیت به نظر برسد (این فقط یک "سلام دنیا" است!)، اما پایه‌ای برای همه چیزهایی که در ادامه می‌آید ایجاد می‌کند.

<!-- ساختار HTML مثال -->
<div class="content">
  <p>متنی که می‌خواهیم استخراج کنیم</p>
</div>

در اینجا طعمی از آنچه با آن کار می‌کنیم:

// مفاهیم پایه (نه راه‌حل!)
import * as cheerio from 'cheerio';

// بارگذاری محتوای HTML
const $ = cheerio.load(htmlContent);

// استفاده از انتخابگرهای CSS
const text = $('p').text();  // همه تگ‌های <p> را انتخاب می‌کند
const specific = $('.content p').text();  // انتخاب مشخص‌تر

فصل 2: داده ساختاریافته

وقتی به صفحه محصول تجاری مجازی نگاه می‌کنیم، چیزها جالب‌تر می‌شوند. اینجا با چندین عنصر با ساختارهای مشابه روبرو هستیم:

<!-- ساختار محصول مثال (ساده‌شده) -->
<div class="product">
  <h2>نام محصول</h2>
  <span class="price">$99.99</span>
  <div class="specs">
    <ul>
      <li>سایز: M</li>
      <li>رنگ: آبی</li>
    </ul>
  </div>
</div>

هنگام کار با داده‌های ساختاریافته مانند این، باید در مورد این موارد فکر کنید:

// رویکرد مفهومی (نه راه‌حل!)
$('.product').each((index, element) => {
  // برای هر محصول، ممکن است بخواهیم:
  // 1. اطلاعات پایه را استخراج کنیم
  const name = $(element).find('h2').text();

  // 2. داده‌های تو در تو را تجزیه کنیم
  const specs = $(element).find('.specs li');

  // 3. خروجی را ساختار دهیم
  const data = {
    name,
    specs: specs.map(/* ... */),
  };
});

نکته حرفه‌ای: قبل از نوشتن کد، زمان بگذارید تا ساختار HTML را تجزیه و تحلیل کنید. به دنبال الگوهایی در نحوه سازماندهی داده‌ها باشید - آیا نام کلاس‌های ثابتی وجود دارد؟ عناصر والد و فرزند چگونه مرتبط هستند؟

فصل 3: اسکرپینگ با کمک هوش مصنوعی

حالا قضیه جالب می‌شود! در حالی که چالش‌های قبلی تکنیک‌های سنتی اسکرپینگ را به ما آموختند، فصل 3 رویکردی مدرن را معرفی می‌کند: اسکرپینگ وب با کمک هوش مصنوعی. ما با سناریوی کابوس‌واری روبرو هستیم - ساختارهای HTML نامتجانس، نام‌های کلاس مبهم، و چندین الگوی فریمورک همه با هم مخلوط شده‌اند.

بیایید ببینیم چه چیزی این چالش را خاص می‌کند:

<!-- ساختار محصول سنتی -->
<div data-testid="product-container-1" class="_3xj_item">
  <h2 data-qa="name">کتانی قرمز</h2>
  <span data-price-current="5999">$59.99</span>
</div>

<!-- کامپوننت به سبک React -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">کفش پیاده‌روی صورتی</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- قالب به سبک Vue -->
<div data-v-abcdef class="product">
  <h2 data-v-abcdef>کفش قایقرانی سرمه‌ای</h2>
  <span data-v-abcdef>$79.99</span>
</div>

رویکردهای سنتی اسکرپینگ در اینجا مشکل دارند زیرا:

  • نام‌های کلاس تصادفی یا مخصوص فریمورک هستند
  • ساختار داده‌ها بین محصولات متفاوت است
  • فریمورک‌های مختلف از الگوهای متفاوت استفاده می‌کنند
  • معنای معنایی در نشانه‌گذاری از بین می‌رود

اینجاست که هوش مصنوعی به کمک می‌آید. به جای نوشتن انتخابگرهای شکننده، می‌توانیم آنچه می‌خواهیم را به زبان طبیعی توصیف کنیم و بگذاریم هوش مصنوعی تطبیق الگو را انجام دهد. مفاهیم کلیدی در این فصل عبارتند از:

  • مهندسی پرامپت برای اسکرپینگ وب
  • استفاده از هوش مصنوعی برای درک معنای معنایی
  • مدیریت ساختارهای داده نامتجانس
  • برخورد با نشانه‌گذاری مخصوص فریمورک
  • حفظ ثبات داده‌ها در الگوهای مختلف

در حالی که هوش مصنوعی جادو نیست، در کارهایی که نیاز به تشخیص الگو و انطباق دارند بسیار عالی عمل می‌کند. این امر آن را برای اسکرپینگ اپلیکیشن‌های وب مدرن که نمی‌توان الگوهای نشانه‌گذاری ثابت را تضمین کرد، بسیار ارزشمند می‌سازد.

نکته‌ای درباره استفاده از هوش مصنوعی

به یاد داشته باشید که کمک هوش مصنوعی به معنای راه‌حل‌های کاملاً خودکار نیست. بهترین نتایج از ترکیب این موارد حاصل می‌شود:

  • تعریف واضح مسئله
  • پرامپت‌های ساختاریافته
  • اعتبارسنجی داده
  • نظارت انسانی

چالش شما تهیه پرامپت‌هایی خواهد بود که به هوش مصنوعی کمک کند تا هم ساختار و هم قصد آنچه سعی در استخراج آن دارید را درک کند.

آماده هستید که دانش سنتی اسکرپینگ وب را با قابلیت‌های مدرن هوش مصنوعی ترکیب کنید؟ بیایید ببینیم هوش مصنوعی چگونه می‌تواند در مقابله با آشفته‌ترین HTML‌ها کمک کند!

راهنمایی‌ها

  1. با انتخابگرهای CSS مختلف آزمایش کنید:
// راه‌های مختلف انتخاب عناصر
$('.class')           // بر اساس کلاس
$('#id')             // بر اساس ID
$('div > p')         // فرزندان مستقیم
$('div p')           // همه نسل‌ها
$('[data-type="x"]') // بر اساس خصوصیت
  1. سعی کنید فرمت خروجی را تغییر دهید
  2. در مورد مدیریت خطا و موارد استثنائی فکر کنید
  3. در نظر بگیرید راه‌حل شما چگونه با مجموعه داده‌های بزرگ‌تر مقیاس‌بندی می‌شود

همه کدهایی که برای شروع نیاز دارید در مخزن پروژه موجود است. آن را کلون کنید، محیط خود را راه‌اندازی کنید، و شروع به اسکرپینگ کنید!

git clone https://github.com/jonaylor89/housefly.git
cd hosuefly

به دنبال راهنمایی هستید؟ HTML منبع برای هر چالش در دایرکتوری apps/chapter{n}/ موجود است. و نمونه‌های حل شده نیز در _solved/chapter{n}/ در دسترس هستند. ساختار را مطالعه کنید، رویکرد خود را برنامه‌ریزی کنید، و به یاد داشته باشید - هر متخصصی روزی مبتدی بوده است.

به یاد داشته باشید که درخواست‌هایتان را مسئولانه مدیریت کنید:

// مثال مدیریت خطای پایه
async function fetchPage(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`خطای HTTP! وضعیت: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('دریافت صفحه ناموفق:', error);
    throw error;
  }
}

اسکرپینگ خوشحال!