חידון: שליטה בביטויים רגולריים
תוכל לאלף רגקס פראי?
מוכנים להתמודד עם כמה ביטויים רגולריים? 🤼♂️
בחנו את הידע שלכם בביטויים רגולריים עם שאלות על תבניות בסיסיות, מכמתים, קבוצות ואותן טענות מבט קדימה/אחורה המסובכות. מהתאמת מחרוזות פשוטה ועד אימות תבניות מורכב – האם תצליחו לזהות את הביטוי הרגולרי הנכון?
מה תואם?
'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 משתמשת בהתאמה לא חמדנית (non-greedy) עם *? שמשמעותה:
- התאם את
<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(/(?<=,)/)התבנית /(?<=,)/ היא מבט לאחור (look-behind) שתואמת אחרי פסיק:
a,(אחרי פסיק)b,(אחרי פסיק)c(אין פסיק אחריו)
המבט לאחור אינו צורך את הפסיק, כך שהפסיק נשאר צמוד לקטע הקודם בתוצאת הפיצול.
זה שימושי כאשר רוצים לפצל מחרוזת על סמך מה שלפניו מבלי לאבד את תו/י הפיצול.
מה תואם?
'$100'.match(/$\d+/)תווים מיוחדים דורשים בריחה עם \ כדי להתאים כפשוטם:
$הוא תו מיוחד (סוף המחרוזת)- כדי להתאים סימן דולר ממשי, יש לברוח ממנו:
\$
תווים נפוצים שדורשים בריחה:
. * + ? ^ $ [ ] \ ( ) { } |ללא בריחה, לתווים מיוחדים רבים יש משמעויות regex שאולי אינן מה שאתה רוצה.
מה תואם?
'$100'.match(/(?<=\$)\d+/)המבט לאחור החיובי (?<=\$) מבטיח שהספרות מקדימות על ידי סימן דולר:
(?<=\$): מבט לאחור עבור סימן דולר\d+: התאמה של ספרה אחת או יותר
טענות מבט לאחור אינן צורכות תווים; הן רק בודקות מה בא לפני. זה שימושי כאשר רוצים להתאים משהו על סמך מה שבא לפניו מבלי לכלול את החלק הקודם.
מה הותאם?
'<b>bold</b>'.match(/<b>(.*?)<\/b>/).slice(1)התבנית משתמשת בהתאמה עצלה עם *?:
<b>: התאמת תג פתיחה(.*?): לכידת כל תווים (עצל)</b>: התאמת תג סגירה
ה-? אחרי * הופך אותו לעצל, ומתאים כמה שפחות תווים.
ללא ?, הוא היה חמדן ומתאים כמה שיותר תווים.
slice(1) מחזירה רק את הקבוצה שנלכדה.
מה תואם?
'😀 🙂'.match(/\p{Emoji}/gu)הדגל u מאפשר:
- בריחות מאפיין Unicode (
\p{...}) - טיפול נכון בזוגות תחליפיים (surrogate pairs)
ללא u, אמוג’י ותווים אחרים של Unicode עלולים לא להתאים כראוי.
התבנית \p{Emoji} תואמת תווים בעלי המאפיין Emoji של Unicode. במחרוזת זו, הכוונה לשני הפיקטוגרפים של אמוג’י.
הערה: בריחות מאפיין Unicode דורשות את הדגל u.
סליחה מראש! 😈
איזו סיסמה תואמת לתבנית זו?
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/אל תכתבו משהו כזה בסביבת ייצור! 😅
התבנית הזו משתמשת במספר look-aheads חיוביים כדי לאכוף:
- לפחות אות אחת גדולה:
(?=.*[A-Z]) - לפחות אות אחת קטנה:
(?=.*[a-z]) - לפחות ספרה אחת:
(?=.*\d) - לפחות תו מיוחד אחד:
(?=.*[!@#$%^&*]) - אורך מינימלי של 8:
.{8,}
Look-aheads מושלמים לאימות סיסמה כי הם יכולים לבדוק קריטריונים מרובים מבלי לצרוך תווים.
איך הצלחת? 🧐
ביטויים רגולריים יכולים להיות חיה קשה לאילוף, אבל הם חזקים להפליא ברגע שמבינים אותם (ואת כל התחביר החדש יותר). תמשיך לתרגל, ותהיה מאסטר RegEx תוך זמן קצר! 🧙♂️
מחפש הפסקה אחרי כל ה-RegEx הזה?
פחח, זכור: הפסקה אחרי הכישורים!
לך לחדר הכושר שלי כדי לרסק עוד אתגרים! 💪