٢٥ مارس ٢٠٢١

فئات الأحرف

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

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

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

For the start, let’s explore the “digit” class. It’s written as \d and corresponds to “any single digit”.

For instance, let’s find the first digit in the phone number:

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 (المسافة تعتبر أيضاً حرف)

Please note that a dot means “any character”, but not the “absence of a character”. There must be a character to match it:

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!)
Not supported in IE

The s flag is not supported in IE.

Luckily, there’s an alternative, that works everywhere. We can use a regexp like [\s\S] to match “any character” (this pattern will be covered in the article Sets and ranges [...]).

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, أيضاً تعمل

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

We can’t add or remove spaces from a regular expression and expect it to work the same.

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

الملخص

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

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

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

Unicode encoding, used by JavaScript for strings, provides many properties for characters, like: which language the letter belongs to (if it’s a letter), is it a punctuation sign, etc.

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

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

التعليقات

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