٣ يونيو ٢٠٢٠

فئات الأحرف

أعتبر هذه المهمه تدريب – لدينا رقم هاتف خلوي مثل "+7(903)-123-45-67", ونريد تحويله من هذا الشكل الي أرقام فقط: 79031234567.

للقيام بذلك ، يمكننا العثور على وإزالة أي شيء ليس رقمًا. يمكن أن تساعد فئات الأحرف في ذلك.

فئات الاحرف هو رمز خاص يطابق أي رمز من مجموعة معينة.

على سبيل المثال ، دعنا نعثر على الرقم الأول في رقم الهاتف:

let str = "+7(903)-123-45-67";

let regexp = /\d/;

alert( str.match(regexp) ); // 7

بدون العلم g, التعبير المنتظم ينظر فقط للمتطابقة الاولي, والذي يكون الرقم الاول \d.

لنقم بأضافة العلم g لأيجاد كل الارقام:

let str = "+7(903)-123-45-67";

let regexp = /\d/g;

alert( str.match(regexp) ); // مصفوفة من المتطابقات: 7,9,0,3,1,2,3,4,5,6,7

// دعنا نحصل علي أرقام الهاتف الحلوي فقط
alert( str.match(regexp).join('') ); // 79031234567

وهذا كان فئة الحرف للأرقام. هناك فئات الاحرف الاخري كذلك.

الأكثر أستخداماً:

\d ( الحرف “d” جاء من كلمة “digit” )
الرقم: يكون من 0 الي 9.
\s ( الحرف “s” جاء من كلمة “space”)
رمز المسافة: يحتوي علي مسافات او مسافات طويلة \t او أسطر جديده \n وعدد قليل من الاحرف النادرة الاخري, مثل \v و \f و \r.
\w ( الحرف “w” جاء من كلمة “word”)
الحرف هذا: إما حرف الأبجدية اللاتينية أو رقم أو تسطير أسفل السطر _. لا تنتمي الأحرف غير اللاتينية (مثل السيريلية أو الهندية) \w.

علي سبيل المثال, \d\s\w الرمز هذا يعني رقم يأتي بعده مسافة ثم يُتبع بحرف, مثل 1 a.

قد يحتوي التعبير المنتظم على كل من الرموز المنتظمة وفئات الاحرف.

علي سبيل المثال, CSS\d ينتج عنه نص CSS مع رقم يأتي بعده:

let str = "Is there CSS4?";
let regexp = /CSS\d/

alert( str.match(regexp) ); // CSS4

أيضاً نستطيع أستخدام الكثير من فئات الأحرف:

alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'

الناتج (كل فئة حرف تقابلها الناتج الخاص بها):

الفئات العكسية

يوجد لكل فئة أحرف “فئة معكوسة” ، يُشار إليها بالحرف نفسه ، ولكن بالأحرف الكبيرة.

يعني “معكوس” أنه يطابق جميع الأحرف الأخرى ، على سبيل المثال:

\D
غير رقمي: أي حرف ما عدا \d, علي سبيل المثال حرف نصي.
\S
بدون مسافة: أي حرف ما عدا \s, علي سبيل المثال حرف نصي.
\W
حرف غير نصي: أي شئ لكن \w, علي سبيل المثال حرف غير لاتيني او مسافة.

في بداية الفصل رأينا كيفية صنع رقم هاتف لرقم فقط من النص مثل+7(903)-123-45-67: أيجاد كل الارقام وتم جمعهم.

let str = "+7(903)-123-45-67";

alert( str.match(/\d/g).join('') ); // 79031234567

طريقة بديلة ,أسهل هي العثور علي أي شئ غير الارقام \D من النص و حذفه من النص:

let str = "+7(903)-123-45-67";

alert( str.replace(/\D/g, "") ); // 79031234567

النقطة هي “أي حرف”

النقطة . تكون فئة حرف ويكون الناتج الخاص بها “أي حرف ما عدا سطر جديد”.

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

alert( "Z".match(/./) ); // Z

او يمكن أستخدامها في منتصف التعبير المنتظم:

let regexp = /CS.4/;

alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4 (المسافة تعتبر أيضاً حرف)

يرجى ملاحظة أن النقطة تعني “أي حرف” ، ولكن ليس “عدم وجود حرف”. يجب أن يكون هناك حرف لمطابقته:

alert( "CS4".match(/CS.4/) ); // الناتج يكون null لان لا يجود أي حرف موضع النقطة.

النقطة تكون أي حرف مثل العلم “s”

بشكل افتراضي ، لا تتطابق النقطة مع حرف السطر الجديد \n.

علي سبيل المثال, التعبير المنتظم A.B يطابق A, ومن ثم B مع أي حرف بينهم, ما عدا السطر الجديد \n:

alert( "A\nB".match(/A.B/) ); // null (لا متطابقة)

هناك العديد من المواقف عندما نرغب في أن تعني النقطة حرفياً “أي حرف” ، بما في ذلك السطر الجديد.

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

alert( "A\nB".match(/A.B/s) ); // A\nB (match!)
لا يدعم في Firefox و IE و Edge

أفحص هذا الموقع https://caniuse.com/#search=dotall للمزيد من المعلومات حول الدعم. وفي نفس وقت الكتابة لا تنتمي الي Firefox و IE و Edge.

لحسن الحظ ، هناك بديل يعمل في كل مكان. نستطيع أستخدام تعبير منتظم مثل [\s\S] ليكون الناتج “أي حرف”.

alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (الناتج!)

الرمز [\s\S] يقول: “حرف مسافة او ليس حرف مسافة”. وبعبارة أخرى ، “أي شيء”. يمكننا أستخدام زوج أخر من الفئات التكميلية, مثل [\d\D], لا يهم أو حتي [^] – لأنه يعني مطابقة أي حرف باستثناء أي شيء.

كما يمكننا استخدام هذه الخدعة إذا أردنا نوعي “النقاط” في نفس النمط: النقطة الفعلية “النقط” في نفس الرمز: النقطة الفعلية . يشتغل بالطريقة المنتظمة (“لا يحتوي علي سطر جديد”), وأيضاً طريقة أخري للحصول علي “أي حرف” مع الرمز [\s\S] او علي حد سواء.

أنتبه للمسافات

عادة نولي القليل من الاهتمام للمساحات. للنصوص 1-5 و 1 - 5 متطابة تقريباً.

ولكن أذا كان التعبير المنتظم لا يحسب مسافات, قد تفشل في العمل.

فلنحاول أيجاد الأرقام مفصوله بواصلة:

alert( "1 - 5".match(/\d-\d/) ); // null, لا ناتج!

دعنا نصلحه بإضافة مسافات إلى التعبير المنتظم \d - \d:

alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, الان أنها تعمل
// or we can use \s class:
alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, أيضاً تعمل

المسافة تعتبر حرف. تساوي في الاهمية مع أي حرف أخر.

لا يمكننا إضافة مسافات أو إزالتها من التعبير المنتظم ونتوقع أن تعمل بالطريقة نفسها.

بمعني أخر, في التعبير المنتظم كل الحروف لها أهمية, والمسافات أيضاً.

الملخص

توجد فئات الأحرف التالية:

  • \d – الارقام.
  • \D – غير الارقام.
  • \s – مسافات و مسافات طويلة وسطر جديد.
  • \S – أي شئ ما عدا \s.
  • \w – الحروف اللاتينية و الارقام و التطسير '_'.
  • \W – الكل ما عدا \w.
  • . – أي حرف أذا كان مع التعبير المنتظم العلم 's', غير ذلك يكون أي شئ ما عدا السطر الجديد \n.

…ولكن هذا ليس كل شيء!

يوفر ترميز Unicode ، الذي تستخدمه JavaScript للسلاسل ، العديد من الخصائص للأحرف ، مثل: اللغة التي ينتمي إليها الحرف (إذا كان حرفًا) فهو علامة ترقيم ، إلخ.

يمكننا البحث بهذه الخصائص أيضًا. هذا يتطلب العلم u, تم تغطيته في المقال التالي.

خريطة الدورة التعليمية

التعليقات

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