٣٠ مايو ٢٠٢٠

الأنماط والأعلام

التعبيرات العادية هي أنماط توفر طريقة فعالة للبحث والاستبدال في النص.

في ال JavaScript, أنها تكون متوفرة عبر RegExp, وكذلك يمكن دمجها في طرق النصوص.

التعبيرات المنتظمة

النعبير المنتظم (ويمكن أختصاره الي “regexp”, او “reg”) يتكون من نمط وأعلام أختيارية.

هناك نوعان من بناء الجملة يمكن استخدامهما لإنشاء كائن تعبير منتظم.

طريقة الكتابة “الطويلة”:

regexp = new RegExp("نمط", "أعلام");

وطريقة الكتابة “القصيرة”, بأستخدام “/”:

regexp = /نمط/; // بدون أعلام
regexp = /نمط/gmi; // أستخدام الاعلام g,m والعلم i (سيتم تغطيته فيما بعد)

هذا الرمز “/…/” يعرف ال JavaScript أننا سننشئ تعبير منتظم. وهي كذلك مثل علامات التنصيص في النصوص.

في الحالتين يصبح ال regexp نموذج مبني من ال RegExp.

الأختلاف الرئيسي بين الطريقتين أن النمط بأستخدام ال /.../ لا يسمح لك بكتابة تعبيرات بداخله (مثل التعبير ${...}). في هذه الحاله تكون الجمله ثابتة.

يتم استخدام الشرطة المائلة عندما نعرف التعبير العادي في وقت كتابة الكود – وهذا هو الوضع الأكثر شيوعًا. بينما ال new RegExp, يتم استخدامه غالبًا عندما نحتاج إلى إنشاء regexp “على السريع” من سلسلة تم إنشاؤها ديناميكيًا. علي سبيل المثال:

let tag = prompt("ما العلامة التي تريد العثور عليها؟", "h2");

let regexp = new RegExp(`<${tag}>`); // مثل /<h2>/ أذا أُجيب "h2" في prompt أعلاه

الأعلام

التعبيرات المنتظمة ربما تحتوي علي أعلام تؤثر في البحث.

هناك فقط 6 منهم في ال JavaScript:

i
عند أستخدام هذا العلم. البحث لا يهتم بحالة الاحرف. فلا أختلاف بين ال A وال a (أنظر للمثال بالأسفل).
g
باستخدام هذه العلامة ، يبحث البحث عن جميع التطابقات ، بدونها – يتم إرجاع المطابقة الأولى فقط
m
وضع متعدد الاسطر (تم تغطيتها في الفصل Multiline mode of anchors ^ $, flag "m").
s
يمكننا وضع ال “dotall”, يسمح النقطة . لمطابقة السطر الجديد \n (تم تغطيته في الفصل فئات الأحرف).
u
تمكين دعم Unicode الكامل. يتيح العلم المعالجة الصحيحة للأزواج البديلة. المزيد عن ذلك في الفصل Unicode: flag "u" and class \p{...}.
y
وضع ال “Sticky”: يبحث عن الموضع في النص (تم تغطيتها في الفصل علم ثابت "y" ، البحث في الموضع)
الألوان

من هنا في نظام الألوان:

  • التعبير المنتظم – red
  • النص (حيث نبحث) – blue
  • النتيجة – green

البحث بأستخدام: str.match

كما ذكرنا سابقًا ، يتم دمج التعبيرات المنتظمة مع وظائف النص.

الوظيفة str.match(regexp) تجد كل ما يحتوي علي regexp في النص str.

لديها 3 طرق عمل:

  1. أذا كان التعبير المنتظم يحتوي علي العلم g, تقوم بإرجاع مجموعة من كافة التطابقات:

    let str = "We will, we will rock you";
    
    alert( str.match(/we/gi) ); // We,we (مصفوفة من نصين متطابقين)

    من فضلك انتبه ان كلا من ال We وال we تم أيجادهم, لان العلم i يجعل التعبير المنتظم لا يهتم بحالة الاحرف.

  2. إذا لم يكن هناك مثل هذا العلم ، فإنه يُرجع المطابقة الأولى فقط في شكل مصفوفة ، مع المطابقة الكاملة في الفهرس 0 وبعض التفاصيل الإضافية في الخصائص:

    let str = "We will, we will rock you";
    
    let result = str.match(/we/i); // بدون العلم g
    
    alert( result[0] );     // We (المتطابقة الاولي)
    alert( result.length ); // 1
    
    // االتفاصيل:
    alert( result.index );  // 0 (موضع الجزء الذي تم البحث عنه)
    alert( result.input );  // We will, we will rock you (النص)

    قد تحتوي المصفوفة على فهارس أخرى ، إلى جانب 0 إذا تم تضمين جزء من التعبير المنتظم بين قوسين. سنتناول ذلك في الفصل التقاط المجموعات.

  3. وأخيراُ, أذا كان هناك ولا متطابقة, فأن الناتج يكون null (لا يهم أذا كان يوجد العلم g او لا يوجد).

    هذا فارق بسيط مهم للغاية. إذا لم تكن هناك تطابقات ، فلن نتلقى مصفوفة فارغة ، ولكن بدلاً من ذلك نتلقى null. قد يؤدي نسيان ذلك إلى حدوث أخطاء ، على سبيل المثال:

    let matches = "JavaScript".match(/HTML/); // = null
    
    if (!matches.length) { // خطأ: لا يمكن قراءة الخاصية 'length' لدي null
      alert("خطأ في السطر الأعلي");
    }

    إذا أردنا أن تكون النتيجة دائمًا مصفوفة ، فيمكننا كتابتها بهذه الطريقة:

    let matches = "JavaScript".match(/HTML/) || [];
    
    if (!matches.length) {
      alert("لا متطابقات"); // الأن أنها تعمل
    }

الأستبدال: str.replace

الوظيفة str.replace(regexp, replacement) تستبدل المتطابقات التي يتم أيجادها بأستخدام ال regexp في النص str مع كلمة replacement (كل المتطابقات يتم أستبدالها أذا كان هنالك العلم g, غير ذلك, يتم أستبدال المتطابقة الاولي فقط).

علي سبيل المثال:

// بدون العلم g
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will

// مع أستخدام العلم g
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will

العنصر الثاني يكون النص replacement. يمكننا استخدام تركيبات أحرف خاصة لإدراج أجزاء من المتطابقة:

الرموز الاجراء في نص الأستبدال
$& إدراج المتطابقة كاملة
$` أدراج جزء من النص قبل المتطابقة
$' أدراج جزء من النص بعد المتطابقة
$n أذا n تكون رقم او رقمين, ثم يدرج محتويات الأقواس رقم n ، المزيد عنها في الفصل التقاط المجموعات
$<name> يدرج محتويات الأقواس مع “الاسم” المحدد ، المزيد عنه في الفصل التقاط المجموعات
$$ أدراج حرف $

مثال علي $&:

alert( "أنا أحب HTML".replace(/HTML/, "$& and JavaScript") ); // أنا أحب HTML and JavaScript

الأختبار: regexp.test

الوظيفة regexp.test(str) يبحث عن تطابق واحد على الأقل, أذا وُجد, يكون الناتج او العائد true, غير ذلك false.

let str = "أنا أحب JavaScript";
let regexp = /أحب/i;

alert( regexp.test(str) ); // true

لاحقًا في هذا الفصل ، سندرس تعبيرات أكثر انتظامًا ، وسنتعرف على المزيد من الأمثلة ، ونلتقي أيضًا بطرق أخرى.

يتم توفير معلومات كاملة عن الأساليب في المقالة .

الملخص

  • يتكون التعبير المنتظم من نمط وأعلام اختيارية: g, i, m, u, s, y.
  • بدون أعلام او رموز خاصة (ذلك سوف ندرسه لاحقاً), البحث عن طريق regexp هو نفسه البحث عن سلسلة فرعية.
  • الوظيفة str.match(regexp) يبحث عن المتطابقات: كلها إن وجدت g علم, غير ذلك, فقط المتطابقة الاولي.
  • الوظيفة str.replace(regexp, replacement) تستبدل المتطابقات التي توجد بأستخدام regexp مع replacement: كلهم أن تم أيجادهم g علم, غير ذلك الاولي فقط.
  • الوظيفة regexp.test(str) تُعيد لنا true أذا كان هناك علي الاقل متطابقة واحدة, غير ذلك, تُعيد لنا false.
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)