از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
حذف برچسب های HTML از متن با استفاده از جاوا اسکریپت ساده
سرفصلهای مطلب
معرفی
اسکرپینگ وب در طول سالها بیشتر و بیشتر رایج شده است، به این معنی که توسعهدهندگان بیشتری باید روش کار با نشانهگذاری HTML را از صفحاتی که در حال خراشیدن هستند، بیابند. اما اگر فقط متن را بخواهید چه؟ با توجه به پیچیدگی HTML، ممکن است این کار سختی به نظر برسد، اما خوشبختانه، راههایی برای انجام آن با جاوا اسکریپت وجود دارد.
چرا برچسب های HTML را حذف کنید؟
پس چرا همیشه می خواهید برچسب های HTML را از متن حذف کنید؟ خوب، دلایل زیادی وجود دارد. به عنوان مثال، ممکن است بخواهید محتوای متنی را از یک وب استخراج کنید page برای تجزیه و تحلیل، یا ممکن است بخواهید ورودی کاربر را برای جلوگیری از حملات XSS (Cross Site Scripting) پاکسازی کنید. حذف تگ های HTML می تواند در هر دو این سناریوها و بسیاری دیگر کمک کند.
توجه داشته باشید: XSS نوعی آسیب پذیری امنیتی است که در آن مهاجم اسکریپت های مخرب را به صفحات وب که توسط سایر کاربران مشاهده می شود تزریق می کند. با پاکسازی ورودی کاربر و حذف برچسبهای HTML، میتوانیم به کاهش این خطر کمک کنیم.
روش حذف تگ های HTML با جاوا اسکریپت
در بخشهای بعدی چند روش برای حذف تگهای HTML از یک رشته نشان خواهیم داد. احتمالاً متوجه خواهید شد که هنگام استفاده از JS ساده، مخرج مشترک استفاده از عبارات با قاعده است که ابزار قدرتمندی برای کار با دستکاریهای رشته پیچیده مانند این است.
را جایگزین کردن() روش
را replace()
متد یک ابزار پرکاربرد برای دستکاری رشتهها در جاوا اسکریپت است و همچنین میتوان از آن برای حذف تگهای HTML از یک رشته استفاده کرد. این کار با جستجوی رشته برای یک الگوی مشخص، که در مورد ما تگ های HTML خواهد بود، و جایگزین کردن آنها با یک رشته خالی کار می کند.
مثال زیر نشان می دهد که چگونه می توانید از آن استفاده کنید replace()
روش حذف تمام تگ های HTML از یک رشته داده شده:
let stringWithHtml = "<p>Hello, World!</p> <a href='#'>Click Me</a>";
let strippedString = stringWithHtml.replace(/<\/?(^>)+(>|$)/g, "");
console.log(strippedString);
// Outputs: Hello, World! Click Me
در این مثال عبارت منظم /<\/?(^>)+(>|$)/g
برای مطابقت با هر رشته ای که با علامت کمتر از (<
، به دنبال آن اسلش اختیاری رو به جلو (/
(>
) که با علامت بزرگتر از (>
) یا انتهای رشته.
را g
در انتهای عبارت منظم، پرچمی وجود دارد که به جاوا اسکریپت میگوید همه رخدادها را جایگزین کند، نه فقط اولین.
با جایگزین کردن این تطابق ها با یک رشته خالی، ما به طور موثر تمام برچسب های HTML را از رشته اصلی حذف می کنیم و فقط محتوای متن را برای ما باقی می گذارد.
استفاده از کتابخانه ها
در حالی که استفاده از جاوا اسکریپت ساده عالی است، گاهی اوقات ممکن است بخواهید از یک کتابخانه برای انجام این کار استفاده کنید. یکی از این کتابخانه ها است Cheerio. Cheerio یک API ساده برای دستکاری اسناد HTML و XML، مشابه jQuery ارائه می دهد.
در اینجا روش استفاده از Cheerio برای حذف تگ های HTML آمده است:
const cheerio = require('cheerio');
let str = "<p>Hello, World!</p>";
let $ = cheerio.load(str);
console.log($.text());
این نیز خروجی خواهد داشت: "Hello, World!"
.
حذف موجودیت های HTML
موجودیتهای HTML در کل یک جانور متفاوت هستند. اینها کاراکترهای خاصی هستند که با استفاده از کدهای خاص برای نمایش در یک سند HTML نوشته می شوند. مثلا، &
موجودیت HTML برای علامت (&
).
حذف موجودیت های HTML کمی پیچیده تر است، اما می توان با استفاده از آن انجام داد he
کتابخانه در اینجا به این صورت است:
const he = require('he');
let str = "Hello, World & everyone else!";
let decodedStr = he.decode(str);
console.log(decodedStr);
این خروجی خواهد داشت: "Hello, World & everyone else!"
.
توجه داشته باشید: را he.decode()
تابع هر موجودیت HTML را در رشته شما رمزگشایی می کند و آنها را به کاراکترهای اصلی خود تبدیل می کند.
با ترکیب این تکنیکها و این، میتوانیم به طور موثری همه تگها و موجودیتهای HTML را با استفاده از جاوا اسکریپت از یک رشته حذف کنیم. به یاد داشته باشید، در حالی که کتابخانهها میتوانند زندگی ما را آسانتر کنند، درک روش انجام آن با جاوا اسکریپت ساده مهارت بسیار خوبی است.
مدیریت تگ های HTML تودرتو
قبل از نتیجه گیری، یک چیزی که احتمالا باید به آن نگاه کنیم این است که آیا تکنیک ما کار می کند؟ روی موجودیت های HTML تو در تو؟ این می تواند در هنگام تلاش برای حذف آنها کمی چالش ایجاد کند. فرض کنید یک رشته مانند این داریم:
let str = "<div><p>Hello <strong>World</strong></p></div>";
اگر بخواهیم از یک رویکرد ساده لوحانه استفاده کنیم، ممکن است به نتایج غیرمنتظره ای برسیم. اما نگران نباشید، جاوا اسکریپت replace()
روش، همراه با یک عبارت منظم خوب ساخته شده، می تواند این سناریو را به خوبی مدیریت کند. در اینجا به این صورت است:
let str = "<div><p>Hello <strong>World</strong></p></div>";
let stripped = str.replace(/<(^>)+>/g, '');
console.log(stripped);
// "Hello World"
در اینجا، عبارت منظم <(^>)+>
با هر دنباله ای که با آن شروع می شود مطابقت دارد <
، به دنبال آن یک یا چند شخصیت که نیستند >
، و به پایان می رسد >
. این با تمام تگهای HTML، تو در تو یا غیر تودرتو، مطابقت دارد و آنها را با یک رشته خالی جایگزین میکند.
نتیجه
در این بایت، روش حذف تگ های HTML از متن با استفاده از جاوا اسکریپت ساده را بررسی کرده ایم. ما در مورد یاد گرفته ایم replace()
روش و روش استفاده از عبارات منظم برای مطابقت با برچسب های HTML. ما همچنین روش مدیریت تگ های HTML تودرتو و کاراکترهای خاص را توضیح داده ایم. در حالی که جاوا اسکریپت ابزارهایی را برای انجام این کار به روشی نسبتاً ساده در اختیار ما قرار می دهد، همیشه پیچیدگی و پیامدهای عملکرد مورد استفاده خاص خود را در نظر بگیرید.
(برچسبها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-29 16:07:03