נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

ביטויים רגולריים ב 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,'');
}

 

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

 

מדריך ביטויים רגולריים ב-JavaScript

 

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

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

 

= 5 + 2