التعبيرات النمطية
التعبيرات النمطية (Regular Expressions) هي أداة قوية جدًا في لغة JavaScript تُستخدم للبحث (search) والتطابق (match) واستبدال النصوص (replace) داخل السلاسل النصية. تخيّل أنك تبني بيتًا: الجدران تمثل البيانات، والأثاث يمثل النصوص، أما التعبيرات النمطية فهي الأدوات الدقيقة التي تسمح لك بالعثور على كرسي معين أو إعادة ترتيب مكتبة كاملة بسهولة. هذه الأداة تساعدك على تنظيم البيانات كما لو كنت ترتب مكتبة (organizing library)، حيث يمكنك إيجاد كتاب بعنوان محدد وسط آلاف الكتب.
في موقع إخباري (news site)، يمكن استخدام التعبيرات النمطية للتحقق من صحة إدخال البريد الإلكتروني عند اشتراك المستخدم في النشرة الإخبارية. في موقع تجارة إلكترونية (e-commerce)، يمكن التأكد من أن أرقام البطاقات الائتمانية مدخلة بشكل صحيح. في صفحة شخصية (personal page)، يمكن أن تتحقق من كلمة المرور (password) وفق معايير محددة. أما في بوابة حكومية (government portal)، فهي أساسية للتأكد من دقة بيانات المواطنين مثل أرقام الهوية.
خلال هذا الدرس ستتعلم كيف تُنشئ تعبيرًا نمطيًا متقدمًا، وكيف تفهم تركيب الرموز الخاصة به، وكيف تطبقه في سيناريوهات عملية. سنتعامل مع أمثلة حقيقية وقابلة للتنفيذ، ونفكك الشيفرة خطوة بخطوة لتصبح قادرًا على استخدام هذه الأداة بقوة ومرونة.
مثال أساسي
javascript// مثال أساسي: التحقق من بريد إلكتروني بسيط باستخدام التعبيرات النمطية
const email = "[[email protected]](mailto:[email protected])";
// إنشاء تعبير نمطي للتحقق من البريد
const regex = /^\[\w\.-]+@\[\w\.-]+.\w+\$/;
// اختبار البريد الإلكتروني
console.log(regex.test(email)); // يُرجع true إذا كان البريد صحيحاًفي المثال أعلاه، نرى كيفية بناء تعبير نمطي (Regular Expression) للتحقق من صحة البريد الإلكتروني. الجزء الأول من الشيفرة هو تعريف سلسلة نصية email تحتوي على بريد إلكتروني تجريبي. بعدها أنشأنا التعبير النمطي regex. هذا التعبير يبدأ بالرمز ^ الذي يعني بداية النص، وينتهي بـ \$ الذي يعني نهاية النص. هذه الرموز تضمن أن السلسلة بأكملها يجب أن تتطابق مع النمط، وليس جزءًا منها فقط.
داخل التعبير، [\w.-]+ يعني "أي حرف أو رقم أو شرطة أو نقطة" بواحد أو أكثر (+). بعد ذلك، لدينا الرمز @ الذي يجب أن يظهر حرفيًا. ثم مرة أخرى [\w.-]+ لمجموعة أخرى من الأحرف المسموح بها، تليها نقطة . وأخيرًا \w+ تعني وجود أحرف لتشكيل امتداد مثل "com" أو "org".
الدالة test() تطبق التعبير على النص وتُرجع true إذا تحقق الشرط وfalse إذا لم يتحقق. يمكننا أن نربط هذا المثال بموقع إخباري يطلب بريد المستخدم عند الاشتراك. إذا أدخل المستخدم بريداً خاطئًا مثل "user\@com" فلن يتطابق مع التعبير ويُرفض الإدخال.
قد يتساءل المبتدئ: لماذا نستخدم ^ و \$? السبب هو أننا نريد التأكد من أن النص كاملًا هو بريد إلكتروني صحيح، وليس مجرد جزء داخله. أيضًا، استخدام الأقواس المربعة [] يسمح لنا بإنشاء مجموعات مخصصة من الأحرف، وهو ما يعطي مرونة كبيرة. هذه الأدوات تجعل التعبيرات النمطية أشبه بآلة دقيقة لتنظيم البيانات النصية.
مثال عملي
javascript// مثال عملي: التحقق من رقم بطاقة هوية في بوابة حكومية (10 أرقام فقط)
const idNumber = "1234567890";
// تعبير نمطي للتحقق من 10 أرقام متتالية
const regexID = /^\d{10}\$/;
// اختبار الرقم
if (regexID.test(idNumber)) {
console.log("رقم الهوية صحيح");
} else {
console.log("رقم الهوية غير صالح");
}عند التعامل مع التعبيرات النمطية في المشاريع الحقيقية، من المهم اتباع بعض الممارسات الفضلى. أولًا: استخدام الصياغة الحديثة مثل (?
من الأخطاء الشائعة: كتابة تعبير نمطي غير دقيق يؤدي لقبول بيانات خاطئة (مثل قبول "123abc" كرقم هوية). خطأ آخر هو تجاهل الرموز الخاصة مثل ^ و\$ مما يؤدي لمطابقة أجزاء غير مقصودة. أيضًا، استخدام replace() بدون اختبار قد يؤدي لتغييرات غير متوقعة في النصوص.
لتصحيح الأخطاء (debugging)، يمكنك استخدام أدوات المتصفح مثل console.log مع regex.exec() لمراقبة النتائج خطوة بخطوة. كذلك، يمكن الاستفادة من مواقع اختبار التعبيرات النمطية (regex tester) لتجربة النمط قبل تضمينه في الكود. التوصية العملية هي البدء بأنماط بسيطة ثم تطويرها تدريجيًا، مع الاحتفاظ باختبارات وحدة (unit tests) للتأكد من أن النمط يعمل دائمًا كما هو متوقع.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| test() | اختبار ما إذا كان النص يطابق التعبير النمطي | /^\d+\$/.test("123") |
| exec() | إرجاع أول تطابق كامل مع المجموعات الفرعية | /\d+/.exec("رقم 42") |
| match() | إرجاع كل التطابقات داخل النص | "abc123".match(/\d+/) |
| replace() | استبدال النصوص التي تطابق النمط | "2025".replace(/\d/g, "*") |
| split() | تقسيم النصوص باستخدام النمط كفاصل | "a,b,c".split(/,/) |
لقد استعرضنا في هذا الدرس التعبيرات النمطية (Regular Expressions) في JavaScript بشكل متقدم. تعلمنا كيف نستخدمها للتحقق من النصوص مثل البريد الإلكتروني أو أرقام الهوية. أدركنا أن الرموز مثل ^ و\$ تحدد بداية ونهاية النص، وأن المجموعات مثل [] تمنحنا المرونة في تحديد الأحرف. كما رأينا كيف يُستخدم test() وexec() وmatch() وغير ذلك لتطبيق التعبيرات النمطية.
التعبيرات النمطية مرتبطة بشكل وثيق بعمليات معالجة DOM في HTML، فعلى سبيل المثال عند إدخال المستخدم بيانات في نموذج، يمكن فحصها في الواجهة قبل إرسالها للخادم. كما أنها مفيدة عند التعامل مع البيانات في الخلفية (backend) لضمان سلامة المعلومات المخزنة أو المنقولة.
الخطوة التالية هي التعمق في استخدام التعبيرات النمطية مع الأحداث (event handling) والتكامل مع واجهات برمجة التطبيقات (APIs). أيضًا، يُستحسن دراسة مفهوم lookahead وlookbehind لفهم أنماط أكثر تعقيدًا.
نصيحة عملية: لا تعتمد على حفظ كل الرموز، بل تدرب على إنشاء أنماط لحل مشكلات حقيقية مثل تصفية المقالات في موقع إخباري، أو التأكد من تنسيقات الأسعار في موقع تجارة إلكترونية. الممارسة المستمرة مع أمثلة من حياتك اليومية ستجعل هذه الأداة جزءًا طبيعيًا من مهاراتك.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى