از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
هنگام ساخت، تجزیه و تحلیل یا خراش دادن صفحات وب، اغلب لازم است اطلاعات متا تگ استخراج شود. این تگ ها داده هایی را در مورد سند HTML مانند توضیحات، کلمات کلیدی، اطلاعات نویسنده و موارد دیگر ارائه می دهند.
در این بایت، روش استخراج این داده ها با استفاده از جاوا اسکریپت را توضیح خواهیم داد.
بازیابی داده های متا تگ
برای بازیابی داده های متا تگ می توانیم از querySelector() روش در جاوا اسکریپت این روش اولین عنصر را در سند برمی گرداند که با انتخابگر یا گروه انتخابگر مشخص شده مطابقت دارد.
در اینجا یک مثال است:
let metaDescription = document.querySelector("meta(name='description')")
.getAttribute("content");
console.log(metaDescription);
در این کد، ما یک متا تگ با نام ‘description’ را جستجو می کنیم و سپس ویژگی ‘content’ آن تگ را دریافت می کنیم. این console خروجی توضیحات از page.
کار با متا تگ های گراف باز (OG).
از متا تگ های Open Graph برای غنی سازی “پیش نمایش” یک صفحه وب استفاده می شود روی رسانه های اجتماعی یا در یک پیام رسان. آنها به شما اجازه می دهند عنوان، توضیحات و تصویری را که در زمان شما استفاده می شود را مشخص کنید page به اشتراک گذاشته شده است.
برای واکشی عنوان Open Graph a page، می توانید از کد زیر استفاده کنید:
let ogTitle = document.querySelector("meta(property='og:title')")
.getAttribute("content");
console.log(ogTitle);
این کد عنوان Open Graph را دریافت می کند page و آن را در console.
واکشی داده ها از تمام متا تگ های سند
اگر می‌خواهید داده‌ها را از تمام متا تگ‌های یک سند واکشی کنید، می‌توانید از آن استفاده کنید getElementsByTagName() روشی که یک لایو برمی گرداند HTMLCollection عناصر با نام تگ داده شده
در اینجا روش انجام این کار آمده است:
let metaTags = document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
console.log(metaTags(i).getAttribute("name") + " : " + metaTags(i).getAttribute("content"));
}
این کد ویژگی های “name” و “content” تمام متا تگ های سند را خروجی می دهد.
بازیابی متا تگ ها با استفاده از Node.js
تا این مرحله ما روش استخراج داده های متا تگ را با استفاده از JS درون مرورگر دیده ایم. ما این را می دانیم زیرا همه نمونه ها از آن استفاده کرده اند document شی، که فقط در محیط های مرورگر موجود است. حال بیایید ببینیم که چگونه می توانید این کار را از یک زمان اجرا JS مختلف، مانند Node انجام دهید.
با فرض اینکه Node و npm دارید روی دستگاه خود را نصب کنید axios و cheerio کتابخانه ها:
$ npm install axios cheerio
کتابخانه ها را با استفاده از اسکریپت خود بارگذاری کنید require دستور:
const axios = require('axios');
const cheerio = require('cheerio');
و اکنون از Axios برای واکشی وب استفاده می کنیم page ما به آن علاقه مندیم. این یک وعده را برمی گرداند، بنابراین مطمئن شوید که آن را به درستی با async/wait یا a .then() مسدود کردن.
try {
const response = await axios.get('https://example.com');
// Extract the page data here...
} catch (error) {
console.error(error);
}
اکنون از Cheerio.js برای استخراج متا تگ ها از HTML که واکشی کرده ایم استفاده می کنیم. اگر تا به حال با jQuery کار کرده باشید، متوجه خواهید شد که Cheerio.js چقدر شبیه است.
try {
const response = await axios.get('https://example.com');
const $ = cheerio.load(response.data);
const metaTags = $('meta');
metaTags.each((i, tag) => {
const name = $(tag).attr('name');
const content = $(tag).attr('content');
console.log(`Meta name: ${name}, content: ${content}`);
});
} catch (error) {
console.error(error);
}
کاری که ما در اینجا انجام دادیم این است که پاسخ HTML را در Cheerio بارگذاری می کنیم و سپس تمام متا تگ ها را می گیریم. ما از طریق هر یک حلقه زدیم و ویژگی های “name” و “content” را چاپ کردیم. شما به راحتی می توانید این کد را تغییر دهید تا سایر ویژگی ها را به تصویر بکشید یا داده ها را در صورت نیاز ساختار دهید.
نتیجه
در این بایت، روش استخراج اطلاعات متا تگ از یک صفحه وب با استفاده از جاوا اسکریپت را بررسی کرده ایم. روش بازیابی داده های متا تگ خاص، کار با تگ های Open Graph و واکشی داده ها از تمام متا تگ ها در یک سند را توضیح دادیم.
همچنین دیدیم که چگونه اطلاعات متا تگ را از سایر زمان‌های اجرا جاوا اسکریپت مانند Node.js با استفاده از کتابخانه‌های Axios و Cheerio.js استخراج کنیم.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-01 15:44:10
