اختبار: إتقان التعبيرات النمطية
هل تستطيع ترويض بعض التعبيرات النمطية الجامحة؟
هل أنت مستعد لمصارعة بعض التعبيرات النمطية؟ 🤼♂️
اختبر معرفتك بالتعبيرات النمطية من خلال أسئلة تغطي الأنماط الأساسية، والمحددات الكمية، والمجموعات، وتأكيدات النظرة الخادعة. من مطابقة السلاسل البسيطة إلى التحقق من الأنماط المعقدة - هل يمكنك تحديد التعبير النمطي الصحيح؟
ما الذي يطابق؟
'cat CAT Cat'.match(/cat/g)يستخدم هذا النمط g، ولكن ليس i:
gيجد جميع المطابقات- بدون
i، تكون المطابقة حساسة لحالة الأحرف
بدون العلم i، يطابق فقط “cat” بالأحرف الصغيرة.
هذا مفيد بشكل خاص عند التعامل مع إدخال المستخدم أو HTML حيث قد تختلف حالة الأحرف.
ماذا سيعيد هذا الكود؟
const words = ['cat', 'hat', 'what', 'bat'];words.filter(word => word.match(/^[ch]at/))النمط /^[ch]at/ يطابق السلاسل التي:
- تبدأ (
^) إما بـ ‘c’ أو ‘h’ (هذا ما يعنيه[ch]- فئة أحرف تطابق حرفًا واحدًا) - متبوعة حرفيًا بـ ‘at’
لذلك، فقط “cat” و “hat” يطابقان هذا النمط. طريقة filter() تحتفظ فقط بالعناصر المطابقة.
ماذا ستطابق هذه العبارة؟
'<div>Hello</div><div>World</div>'.match(/<div>.*?<\/div>/g)النمط /<div>.*?<\/div>/g يستخدم المطابقة غير الجشعة مع *? مما يعني:
- طابق
<div> - طابق أي حرف (
.*) ولكن بأقل عدد ممكن (?) - حتى تجد
</div> - العلامة
gتجعله يطابق جميع التكرارات
بدون ?، المطابقة الجشعة .* ستطابق كل شيء من أول <div> إلى آخر </div>، مما يعطي تطابقًا واحدًا كبيرًا. مع ?، يطابق كل زوج على حدة.
ماذا سيعيد هذا؟
'hello\nworld'.match(/\w+/g)النمط \w+ يطابق حرفًا أو أكثر من حروف الكلمات. على الرغم من وجود سطر جديد في النص، فإن \w يطابق:
- الحروف (a-z, A-Z)
- الأرقام (0-9)
- الشرطة السفلية (_)
لذا، يعمل السطر الجديد كحدود للكلمة، ونحصل على تطابقين. لو استخدمنا .*، لما كان سيطابق السطر الجديد افتراضيًا (ستحتاج إلى العلم s لذلك).
ماذا سيطابق هذا؟
'$100 and €50'.match(/\d+(?=[\$€])/g)هذا النمط لن يطابق أي شيء لأن التطلع إلى الأمام معكوس! إذا كنت تريد أرقامًا مسبوقة بـ $ أو €، استخدم التطلع إلى الخلف: /(?<=[\$€])\d+/g.
تتحقق التطلعات إلى الأمام مما يأتي بعد الموضع الحالي. النمط كما هو مكتوب يبحث عن:
- رقم واحد أو أكثر (
\d+) - متبوعًا بـ (
(?=...)) إما $ أو € ([\$€])
نظرًا لعدم وجود أرقام متبوعة برموز العملات (بل هي مسبوقة بها)، لا نحصل على أي تطابقات.
ما الذي سيتطابق؟
'cat cats category'.match(/\bcat\b/g)يمثل \b حدًا للكلمة، والذي يتطابق مع:
- بين حرف كلمة وحرف غير كلمة
- في بداية/نهاية السلسلة إذا كان هناك حرف كلمة
لذلك /\bcat\b/ يتطابق مع “cat” فقط عندما تكون كلمة كاملة، وليس جزءًا من كلمة أخرى.
- ✅ “cat” (محاطة بمسافات)
- ❌ “cats” (لا يوجد حد بعد “cat”)
- ❌ “category” (لا يوجد حد بعد “cat”)
ما هو المخرَج؟
'banana'.match(/a/g)يغير العلم g (العام) سلوك match():
- بدون
g: يُرجع أول تطابق مع مجموعات الالتقاط - مع
g: يُرجع مصفوفة من جميع السلاسل المطابقة
في هذه الحالة، يجد جميع تكرارات “a” في “banana”.
ملاحظة: إذا كنت بحاجة إلى جميع التطابقات ومجموعات الالتقاط معًا، استخدم matchAll() أو طريقة exec() في حلقة.
ما الذي يطابق هذا النمط؟
'abc123 def456'.match(/(?<!abc)\d+/g)النظر الخلفي السلبي (?<!abc) يضمن أن الأرقام لا يسبقها “abc”:
- ❌ “123” (يسبقه “abc”)
- ✅ “23” (يسبقه “abc1”)
- ✅ “456” (يسبقه “def”)
تدعم JavaScript تأكيدات النظر الخلفي في المحركات الحديثة. يستخدم هذا المثال نظرًا خلفيًا بطول ثابت: abc دائمًا ثلاثة أحرف. النظر الخلفي بطول متغير هو الحافة الأكثر تعقيدًا الخاصة بالمحرك.
ملاحظة: دعم النظر الخلفي حديث نسبيًا في JavaScript. تحقق من توافق المتصفح إذا كنت بحاجة لدعم المتصفحات القديمة.
ما الذي سيعيده هذا؟
'2029-12-31'.match(/(\d{4})-(\d{2})-(\d{2})/).slice(1)يستخدم النمط ثلاث مجموعات ملتقطة:
(\d{4})تلتقط السنة(\d{2})تلتقط الشهر(\d{2})تلتقط اليوم
match() بدون العلم g يعيد:
- الفهرس 0: المطابقة الكاملة
- الفهرس 1+: المجموعات الملتقطة
slice(1) هي حيلة شائعة للحصول على المجموعات الملتقطة فقط.
أي من هذه سيكون الناتج؟
"123aBc".match(/^\d+(?![a-z])/ig)يضمن النظرة إلى الأمام السلبية (?![a-z]) عدم وجود أحرف صغيرة بعد الأرقام. نظرًا لأن الجزء “3aBc” يحتوي على حرف صغير بعد الأرقام، فإن الجزء الخاص به لا يتطابق. لذلك فقط البداية “12” هي التي تتطابق.
ما الذي يتم إرجاعه؟
'a,b,c'.split(/(?<=,)/)النمط /(?<=,)/ هو نظرة خلفية تتطابق بعد الفاصلة:
a,(بعد الفاصلة)b,(بعد الفاصلة)c(لا توجد فاصلة بعدها)
النظرة الخلفية لا تستهلك الفاصلة، لذا تبقى الفاصلة ملتصقة بالجزء السابق في نتيجة التقسيم.
هذا مفيد عندما تريد تقسيم سلسلة بناءً على ما يسبقها دون فقدان الحرف (أو الأحرف) الفاصلة.
ما الذي يطابق؟
'$100'.match(/$\d+/)الأحرف الخاصة تحتاج إلى إفلات باستخدام \ لمطابقتها حرفيًا:
$هو حرف خاص (نهاية السلسلة)- لمطابقة علامة الدولار حرفيًا، قم بإفلاتها:
\$
الأحرف الشائعة التي تحتاج إلى إفلات:
. * + ? ^ $ [ ] \ ( ) { } |بدون الإفلات، العديد من الأحرف الخاصة لها معاني في التعبيرات المنتظمة قد لا تكون ما تريده.
ما الذي تمت مطابقته؟
'$100'.match(/(?<=\$)\d+/)تأكيد النظر إلى الخلف الإيجابي (?<=\$) يضمن أن الأرقام مسبوقة بعلامة الدولار:
(?<=\$): النظر إلى الخلف لعلامة الدولار\d+: مطابقة رقم واحد أو أكثر
تأكيدات النظر إلى الخلف لا تستهلك الأحرف؛ فهي تتحقق فقط مما يأتي قبل. هذا مفيد عندما تريد مطابقة شيء بناءً على ما يسبقه دون تضمين الجزء السابق.
ما الذي تمت مطابقته؟
'<b>bold</b>'.match(/<b>(.*?)<\/b>/).slice(1)يستخدم النمط المطابقة الكسولة مع *?:
<b>: مطابقة الوسم الافتتاحي(.*?): التقاط أي أحرف (كسول)</b>: مطابقة الوسم الختامي
إن ? بعد * يجعله كسولًا، حيث يطابق أقل عدد ممكن من الأحرف.
بدون ?، سيكون جشعًا ويطابق أكبر عدد ممكن.
slice(1) يُرجع المجموعة الملتقطة فقط.
ما الذي يطابق؟
'😀 🙂'.match(/\p{Emoji}/gu)العلم u يمكّن:
- هروب خصائص يونيكود (
\p{...}) - التعامل الصحيح مع الأزواج البديلة
بدون u، قد لا تتطابق الرموز التعبيرية وغيرها من أحرف يونيكود بشكل صحيح.
النمط \p{Emoji} يطابق الأحرف التي تمتلك خاصية Emoji في يونيكود. في هذه السلسلة، يعني ذلك الرمزين التعبيريين.
ملاحظة: هروب خصائص يونيكود يتطلب العلم u.
اعتذار مقدمًا! 😈
أي كلمة مرور تطابق هذا النمط؟
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/لا تكتب شيئًا كهذا في الإنتاج! 😅
يستخدم هذا النمط عدة تطلعات إيجابية (positive look-aheads) لفرض:
- حرف كبير واحد على الأقل:
(?=.*[A-Z]) - حرف صغير واحد على الأقل:
(?=.*[a-z]) - رقم واحد على الأقل:
(?=.*\d) - رمز خاص واحد على الأقل:
(?=.*[!@#$%^&*]) - طول أدنى 8:
.{8,}
التطلعات (look-aheads) مثالية للتحقق من كلمة المرور لأنها تستطيع التحقق من معايير متعددة دون استهلاك الأحرف.
كيف كان أداؤك؟ 🧐
التعبيرات المنتظمة قد تكون وحشًا يصعب ترويضه، لكنها قوية بشكل لا يُصدق بمجرد أن تتقنها (وجميع الصياغات الأحدث). استمر في الممارسة، وستصبح سيدًا في RegEx في وقت قصير! 🧙♂️
هل تبحث عن استراحة بعد كل هذا الـ RegEx؟
هاه، تذكر: استراحة بعد المهارات!
اضغط على صالة التحديات لتحطيم المزيد من التحديات! 💪