תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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

מחבר:
בתאריך:

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

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

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

/regexp/

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

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

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

סימן משמעות

^

מתחיל ב

[]

בתוך הסוגריים המרובעים מופיעים סט התווים שלהם צריך למצוא התאמה

a-z

כל האותיות הקטנות בשפה האנגלית

A-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 כי המחרוזת כוללת גם רווחים, שאינם תווים אלפא-נומריים.

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

סימן משמעות

^

המחרוזת צריכה להתחיל ב

[]

בתוך הסוגריים המרובעים מופיע סט התווים שלהם צריך למצוא התאמה

a-z

הסט של כל האותיות הקטנות בשפה האנגלית

A-Z

הסט של כל האותיות הגדולות בשפה האנגלית

0-9

הסט של כל הספרות

_

קו תחתון

+

צריך שיהיה לפחות תו אחד ששייך לסט

$

המחרוזת צריכה להסתיים ב

הדוגמה הבאה מנסה להשתמש בדפוסים כדי לזהות האם מחרוזת היא התוכן של אי-מייל. לשם כך, נחפש מחרוזת שמתחילה ב-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 עם אותיות קטנות בלבד.

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

סימן משמעות

^

המחרוזת צריכה להתחיל ב

|

או

$

המחרוזת צריכה להסתיים ב

^hi|^hello|bye$

מתחיל ב-hi או ב-hello, או מסתיים ב-bye

כדי למצוא התאמה לביטוי בלי להתחשב האם האותיות הם גדולות או קטנות נוסיף לביטוי את הדגל 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

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

סימן משמעות

\b

גבול מילה (תחילת מחרוזת, סוף מחרוזת או רווח לאחר מילה)

?

הביטוי שמופיע לפני כן יכול להופיע פעם אחת או לא להופיע בכלל

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

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

 

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

 

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

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

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

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

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

שון בתאריך: 08.04.2022

היי לכן