ביטויים רגולריים ב javascript

ביטויים רגולריים משמשים לזיהוי דפוסים במחרוזות בכל שפות התכנות. כשעיקר ההבדל בין שפה לשפה הוא בתחביר. ביטויים רגולריים הם מאוד שימושיים. משתמשים בהם לזיהוי URL, לסינון ספאם, לווידוא המידע שהזינו משתמשים לקבצים, לזחילה ברשת, לבדיקת החוזק של ססמאות, ומה לא. במדריך זה תלמדו את הבסיס לשימוש בביטויים רגולריים בשפת ה-JavaScript.

כתבתי מדריך מקיף על שימוש בביטויים רגולריים ב-PHP ואתם מוזמנים ללמוד ממנו כי הביטויים הרגולריים עובדים כמעט באותו אופן בכל שפה.

את הביטוי הרגולרי כותבים בין קווים נטויים. כך:

/regexp/

נשתמש בביטוי הבא אם אנחנו רוצים למצוא התאמה למחרוזת באורך תו אחד לפחות שכל התווים בה הם אותיות קטנות או גדולות באנגלית:

var regex = /^[a-zA-Z]+$/;

נסביר את הביטוי הרגולרי:

הפונקציה test

הפונקציה test מחפשת התאמה של מחרוזת לביטוי רגולרי, ומחזירה true במקרה של התאמה או false.

לדוגמה, הביטוי הרגולרי הבא בודק האם המחרוזת כוללת רק אותיות אנגליות (קטנות או גדולות) לפחות פעם אחת:

var str = "whatsApp";
var matches = /^[a-zA-Z]+$/.test(str);
console.log(matches); // true

והתוצאה היא true.

לעומת זאת:

var str = "whats App";
var matches = /^[a-zA-Z]+$/.test(str);
console.log(matches); // false

מחזיר false כי הביטוי מכיל גם רווחים ולא רק אותיות אנגליות.

הפונקציה הבאה בודקת האם הביטוי הוא אלפא-נומרי (כוללת אותיות אנגליות, ספרות, וקו תחתון בלבד):

function isAlphaNumeric(str){
    return (/^[a-zA-Z0-9_]+$/.test(str));
}

console.log(isAlphaNumeric("whatsApp")); // true
console.log(isAlphaNumeric("whats_app")); // true

התוצאה היא true כי המחרוזת מכילה רק תווים אלפא-נומריים.

console.log(isAlphaNumeric("whats app")); // false

התוצאה היא false כי המחרוזת כוללת גם רווחים, שאינם תווים אלפא-נומריים.

כיצד לקרוא את הביטוי הרגולרי?

הדוגמה הבאה מנסה להשתמש בדפוסים כדי לזהות האם מחרוזת היא התוכן של אי-מייל. לשם כך, נחפש מחרוזת שמתחילה ב-hi או hello או מסתיימת ב-bye.

function isEmail(str){
    return (/^hi|^hello|bye$/.test(str));
}

נבחן את הפונקציה:

console.log(isEmail("hi 42, how do you do?"));// true
console.log(isEmail("Hi 42, how do you do?"));// false

במקרה הראשון, נמצאה התאמה בזכות ה-hi בתחילת המחרוזת.

במקרה השני, לא נמצאה ההתאמה בגלל שהמחרוזת מתחילה ב-Hi עם אות גדולה, בעוד הביטוי מחפש hi עם אותיות קטנות בלבד.

נסביר את הביטוי הרגולרי:

כדי למצוא התאמה לביטוי בלי להתחשב האם האותיות הם גדולות או קטנות נוסיף לביטוי את הדגל i. לדוגמה:

/^hi|^hello|bye$/i

נשכתב את הפונקציה על ידי הוספת הדגל i

function isEmail(str){
    return (/^hi|^hello|bye$/i.test(str));
}

console.log(isEmail("hi 42, how do you do?"));// true
console.log(isEmail("Hi 42, how do you do?"));// true

דגלים (flags) בחיפוש

כדי לא להתחשב ב-case (אותיות קטנות או גדולות באנגלית), נוסיף את הדגל i:

/^hi/i

כדי שההתאמה לא תעצור אחרי המקרה הראשון, אלא תהיה גלובלית, נוסיף את הדגל g:

/hi/g

ניתן להשתמש ביותר מדגל אחד בביטוי. לדוגמה, אם רוצים התאמה גלובלית וגם לאותיות קטנות או גדולות:

/hi/ig

למצוא את מיקום הביטוי במחרוזת באמצעות search

הפונקציה search מחפשת את המיקום של ביטוי ואם היא מוצאת התאמה היא מחזירה את מיקום התו הראשון של הביטוי. במידה ואינה מוצאת היא מחזירה 1-.

בדוגמה הבאה, נחפש את מיקום הביטוי /s(o|a)w/.
ביטוי שמתחיל ב-s, אח"כ באים o או a פעם אחת בדיוק, ובסוף w.

var str = "The man we saw sow a saw.";
console.log(str.search(/s(o|a)w/)); // 11

התוצאה 11 היא המיקום של המחרוזת הראשונה שמתאימה לדפוס המוצע.

למצוא את מיקום הביטוי במחרוזת באמצעות exec

ניתן למצוא את מיקום הביטוי באמצעות exec. לדוגמה:

var regex  = /s(o|a)w/g;
var str = "The man we saw sow a saw.";
var match = regex.exec(str); // ["saw", "a", index: 11, input: "The man we saw sow a saw."]

והתוצאה נותנת את ההתאמה הראשונה ואת מיקום ההתאמה (index).

במידה ו-exec לא מוצא התאמה הוא יחזיר null.

אבל אם נרצה למצוא את כל המקרים של ההתאמה במחרוזת ולא רק את ההתאמה הראשונה, נצטרך להריץ את exec בתוך לולאה. באופן הבא:

function searchStr(str, regex){
     var positions = [];

      while((match = regex.exec(str)) !== null){
          positions.push(match.index);
      }

       return positions;
}

console.log(searchStr("The man we saw sow a saw.", /s(o|a)w/g));//[11, 15, 21]

והתוצאה היא מערך שמכיל את כל המיקומים שבהם מתחיל הביטוי.

החלפה של ביטוי אחד באחר באמצעות replace

var newStr = "https://cdn.com".replace(/^http(s)?:/, "");
console.log(newStr); // cdn.com

הפונקציה מחפשת את הדפוס http עם s או בלי בתנאי שהוא מופיע בתחילת המחרוזת ומחליפה אותו במחרוזת ריקה.

כדי לבצע החלפה של הדפוס באופן גלובלי בכל מקום שהוא נמצא במחרוזת, נשתמש בדגל g.

var list = "https://cdn.com, http://google.com, http://phpenthusiast.com";
var newStr =list.replace(/\bhttp(s)?:/g,"");
console.log(newStr);  / //cdn.com, //google.com, //phpenthusiast.com

נסביר את הביטוי הרגולרי:

הפונקציה המועילה הבאה תחליף את המרווחים הלבנים בתחילת ובסוף המחרוזת:

function trim(str){
    return str.replace(/^\s+|\s+$/g,'');
}

ביטויים רגולריים וקבוצות לכידה

בביטויים רגולריים, סוגריים () משמשים ליצירת קבוצות לכידה. קבוצות לכידה מאפשרות לך "ללכוד" ולחלץ חלקים ספציפיים מהטקסט המתאים. כאשר יש לך מספר זוגות של סוגריים בביטוי, כל זוג סוגריים יוצר קבוצת לכידה נפרדת, ואתה יכול להתייחס לקבוצות אלו לפי האינדקס או השם שלהן. בדוגמה הבאה, אנחנו לוקחים את התאריך בפורמט המקובל בעולם המחשבים (2013-09-15) וממירים אותו לפורמט ישראלי נפוץ (15.09.2013) :

var inputString = "2013-09-15";
var regex = /(\d{4})-(\d{2})-(\d{2})/;
// The first parentheses group captures the year
// The second parentheses group captures the month
// The third parentheses group captures the day

var result = inputString.replace(regex, function(match, group1, group2, group3) {
    // Reorder the captured groups
    return group3 + "." + group2+ "." + group1;
});

console.log(result); // 15.09.2013

// You can name the capture groups
var result = inputString.replace(regex, function(match, year, month, day) {
    // Reorder the captured groups
    return day + "." + month + "." + year;
});

console.log(result); // 15.09.2013

נסביר:

• הביטוי הרגולרי לוכד את השנה, החודש והיום בקבוצות נפרדות כאשר כל קבוצה מוגדרת בנפרד בתוך סוגריים.
• פונקציית ההחלפה replace() מקבלת את הטקסט המתאים (match), השנה (year), החודש (month) והיום (day) כארגומנטים ומחזירה את תבנית התאריך הרצויה.

אם אתה צריך להפוך את אחת מקבוצות הלכידה לאופציונלית אתה יכול להוסיף סימן שאלה ונקודתיים בראש הסוגריים של קבוצת הלכידה האופציונלית. בדוגמה הבאה, קבוצת הלכידה של הימים היא אופציונלית:

var inputString = "2013-09";
var regex = /(\d{4})-(\d{2})(?:-(\d{2}))?/;
// The first parentheses group captures the year
// The second parentheses group captures the month
// The third parentheses group captures the day (optional)

var result = inputString.replace(regex, function(match, year, month, day) {
    // Reorder the captured groups, and handle the optional day
    var formattedDate = year + "." + month;
    if (day !== undefined) {
        formattedDate += "." + day;
    }
    return formattedDate;
});

console.log(result);

• הביטוי הרגולרי כולל עכשיו את קבוצת הלכידה (?:-(\d{2}))? ההופכת את הימים לאופציונליים באמצעות ההוראה (?:...)? דבר המאפשר לעבוד עם מחרוזת קלט שאינה בהכרח מכילה את החלק של יום בתאריך.
• כתוצאה מהשינוי, הקוד יעבוד עבור הקלטים "2013-09-15" וגם "2013-09" כיוון שחלק היום בתאריך הוא אופציונלי.

טיפ חשוב לדרך

טיפ חשוב ליישום ביטויים רגולריים הוא שהם עובדים על מחרוזות וטקסטים. לכן, כדאי לבדוק אם הקלט של הפונקציות הוא מחרוזת לפני שעובדים עם ביטויים רגולריים:

var input = "1,234,567$"; // Replace this with your input variable

if (typeof input === 'string') {
    console.log("Input is a string.");
} else {
    console.log("Input is not a string.");
}

במדריך זה נגעתי על קצה המזלג בעולם החשוב והמעניין של ביטויים רגולריים ב-javascript. אתם יותר ממוזמנים ללמוד עם מדריך הביטויים הרגולריים של רשתטק. בנוסף קיים כלי מצוין לבחינת הביטויים שלכם און-ליין בכתובת http://www.regexpal.com

לכל מדריכי ה-javascript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים