📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.
مقدمة افتتاحية: بعد أن فهمنا الأهمية النظرية للـ Slugs في تحسين محركات البحث وتجربة المستخدم، حان الوقت لننتقل إلى الجانب العملي! في هذا الدرس، سنقوم ببناء دالة JavaScript قوية ومرنة يمكنها تحويل أي نص، مهما كانت تعقيداته، إلى Slug نظيف وصديق لمحركات البحث. ستتعلم خطوة بخطوة كيف تعالج النصوص وتزيل الأحرف غير المرغوب فيها وتضمن أن تكون روابطك جاهزة تمامًا للإنترنت.
فهم دالة slugify
سنقوم بإنشاء دالة JavaScript باسمslugifyتستقبل نصًا كمدخل وتقوم بتحويله إلى Slug مثالي. إليك الكود الكامل للدالة:
function slugify(text) { return text .toString() .toLowerCase() .trim() .replace(/\s+/g, '-') // استبدال المسافات بشرطات .replace(/[^\w\-]+/g, '') // حذف كل الرموز غير الكلمات (ما عدا الشرطات) .replace(/\-\-+/g, '-') // منع تكرار الشرطات المتتالية (--- تصبح -) .replace(/^-+/, '') // حذف الشرطات من البداية .replace(/-+$/, ''); // حذف الشرطات من النهاية}شرح تفصيلي لخطوات الدالة:
دعنا نحلل كل جزء من هذه الدالة لفهم كيف تعمل:.toString(): هذه الخطوة تضمن أن المدخل الذي تستقبله الدالة هو سلسلة نصية (string). إذا كان المدخل رقمًا أو نوع بيانات آخر، فسيتم تحويله إلى نص..toLowerCase(): تحول هذه الخطوة جميع الأحرف في السلسلة إلى أحرف صغيرة. هذا مهم جدًا للـ SEO ولتجنب مشكلات تكرار المحتوى بسبب اختلاف حالة الأحرف في عناوين URL..trim(): تزيل هذه الدالة أي مسافات بيضاء (فراغات) من بداية ونهاية السلسلة النصية..replace(/\s+/g, '-'): هذه هي أول عملية استبدال باستخدام التعبيرات النمطية (Regular Expressions)./\s+/g: يبحث عن واحد أو أكثر من أحرف المسافة البيضاء (\s+) في السلسلة بأكملها (gتعني 'global' أو شامل).'-': يستبدل كل مجموعة من المسافات بشرطة واحدة.
.replace(/[^\w\-]+/g, ''): تزيل هذه الخطوة جميع الأحرف التي ليست أحرفًا أبجدية رقمية أو شرطات./[^\w\-]+/g:\wيمثل أي حرف أبجدي رقمي (a-z, A-Z, 0-9) أو شرطة سفلية (_).\-يمثل الشرطة.[^...]يعني "أي شيء ليس داخل الأقواس". لذا، هذا التعبير يبحث عن أي شيء ليس حرفًا أبجديًا رقميًا أو شرطة، ويطبق ذلك على السلسلة بأكملها.'': يستبدل هذه الأحرف بسلسلة فارغة، أي يزيلها تمامًا.
.replace(/\-\-+/g, '-'): هذه الخطوة تضمن عدم وجود شرطات متتالية./\-\-+/g: يبحث عن مجموعتين أو أكثر من الشرطات المتتالية.'-': يستبدلها بشرطة واحدة. هذا يمنع ظهور Slugs مثلarticle---title.
.replace(/^-+/, ''): تزيل هذه الخطوة أي شرطات موجودة في بداية السلسلة./^-+/:^يمثل بداية السلسلة، و-+يبحث عن واحدة أو أكثر من الشرطات.'': يزيلها.
.replace(/-+$/, ''): تزيل هذه الخطوة أي شرطات موجودة في نهاية السلسلة./-+$/:$يمثل نهاية السلسلة، و-+يبحث عن واحدة أو أكثر من الشرطات.'': يزيلها.
تجربة الدالة:
لنختبر الدالة مع مثال عملي:
const articleTitle = " How to Learn JavaScript & Python in 2026!!! ";console.log("الرابط المولد للمقال:", slugify(articleTitle));// النتيجة المتوقعة: how-to-learn-javascript-python-in-2026كيفية استخدامها في تطبيقات الويب:
يمكنك استخدام دالةslugifyفي العديد من السيناريوهات، مثل:- إنشاء روابط للمقالات والمدونات: عند إضافة مقال جديد، يمكنك استخدام هذه الدالة لإنشاء Slug تلقائيًا من عنوان المقال.
- أسماء المنتجات في المتاجر الإلكترونية: لإنشاء عناوين URL نظيفة لصفحات المنتجات.
- تصنيفات الأقسام أو الوسوم: لتحويل أسماء التصنيفات إلى روابط صديقة للبحث.