פרק 9: תבניות טקסט

 

·                     הקדמה

·                     יצירת תבניות טקסט

·                     אופן השימוש בתבניות טקסט

·                     השימוש בסוגריים בתוך מחרוזת התבנית

·                      תרגילים

 

 

 

הקדמה

 

תבניות טקסט (Regular Expressions) הם אובייקטים מסוג RegExp שמשמשים לבדיקת מחרוזות תווים כדי לדעת אם הן מכילות צירופים מסויימים של תווים. המתודות שעושות שימוש בתבניות הטקסט הן המתודות text ו- exec אשר ניתנות להפעלה על אובייקט RegExp (יוסבר בהמשך), והמתודות replace, search, match ו- split אשר ניתנות להפעלה על אובייקט String (גם הן יוסברו בהמשך).

 

 

יצירת תבנית טקסט

 

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

MyNewRegExp  object = / zip*r /

דרך שניה כרוכה בהפעלת ה-constructor של האובייקט RegExp. לדוגמא:

MyNewRegExp  object = new RegExp("zip*r")

 

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

1.           zipr

2.           zippr

3.           zir

וכדומה...

 

אופן השימוש בתבניות הטקסט יוסבר בהמשך. בחלקו זה של הפרק יוסבר אופן יצירתן של תבניות הטקסט.

 

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

 

תפקידו

התו

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

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

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

\

תו זה משמש לבדיקת הימצאות המחרוזת שמופיעה מייד אחריו בתחילת המחרוזת הנבדקת. באופן זה, תבנית הטקסט /^bcd/ תתאים לתת המחרוזת "bcd" שמופיעה ב-"bcdefg" אך היא לא תתאים לתת המחרוזת "bcd" שמופיעה במחרוזת "qwebcdsf".

^

תו זה משמש לבדיקת הימצאות המחרוזת שמופיעה לפניו בסופה של המחרוזת הנבדקת.  באופן זה, תבנית הטקסט /$n/ תתאים לתת המחרוזת "n" שנמצאת במחרוזת "super man" אך היא לא תתאים לאף תת מחרוזת שנמצאת במחרוזת "nokia".

$

תו זה משמש לבדיקת הימצאות התו שמופיע לפניו 0 (או יותר) פעמים במחרוזת הנבדקת. באופן זה, תבנית הטקסט /jo*/ תתאים גם למחרוזת "j", ובאותה מידה גם למחרוזת "jo" וגם למחרוזות כגון "joo" ו- "jooo" ודומותיהן.

*

תו זה משמש לבדיקת הימצאות התו שמופיע לפניו פעם אחת (או יותר) במחרוזת הנבדקת. באופן זה, תבנית הטקסט /bag+/ תתאים גם למחרוזת "bag"  וגם למחרוזות שבהן ‘g’ מופיעה יותר מפעם אחת אחרי צמד האותיות ba כגון  "bagggg".

+

תו זה משמש לבדיקת המצאות התו שמופיע לפניו פעם אחת (או בכלל לא) במחרוזת הנבדקת. באופן זה, תבנית הטקסט /c?ol/ תתאים גם למחרוזת "col" ו- "ol".

?

תו זה (נקודה בודדת) יוכל לשמש בתור תחליף לכל תו פרט לתו  השורה החדשה '\n'. באופן זה, תבנית הטקסט /..t/ תתאים למחרוזות כגון: "but", "mat", "sit" ודומותיהן, אך היא לא תתאים למחרוזת כגון "\nt".

.

בצורת כתיבה זו ניתן לבדוק את המצאות המחרוזת x או המחרוזת y במחרוזת הנבדקת. כלומר, תבנית הטקסט /"abba"|"mama"/ תתאים גם לתת המחרוזת "abbe" במחרוזת "kukyabbamamy" וגם לתת המחרוזת "mama" במחרוזת "mamamiya".

(x|y)

בצורת כתיבה זו ניתן לבדוק האם התו שממוקם במקום הקו התחתי מופיע n  פעמים במחרוזת הנבדקת. כלומר, תבנית הטקסט /row{2}/ תתאים למחרוזת "roww" וגם לתת המחרוזת "roww" ששייכת למחרוזת "abbrowww". לעומת זאת, בין תבנית הטקסט האמורה לא תימצא התאמה לאף תת מחרוזת מהמחרוזת "asdrowd".

_{n}

בצורת כתיבה זו ניתן לבדוק האם התו שממוקם במקום הקו התחתי מופיע n פעמים (או יותר) במחרוזת הנבדקת. כלומר, תבנית הטקסט /asd{3,}/ תתאים למחרוזות כגון: "aaasddd", "asddddd".

_{n,}

בצורת כתיבה זו ניתן לבדוק האם התו שממוקם במקום הקו התחתי מופיע לפחות n  פעמים אך לא יותר מ-m.  כלומר, תבנית הטקסט /de{2,4}/ תתאים למחרוזות כגון "dee", ו- "frdeee".

_{n, m}

בצורת כתיבה זו ניתן לבדוק האם אחד התווים מבין התווים שבסוגריים המרובעות (התווים x,y ו- z וניתן גם יותר משלושה) מופיע במחרוזת הנבדקת. כך למשל, תבנית הטקסט /[abcdef]/ תימצא כמתאימה לתו ‘c’ אשר מופיע במחרוזת "bucy". ניתן גם לציין טווח של תווים במקום רשימה של תווים. בדרך זו, תבנית הטקסט /[a-f]/ תהיה זהה לחלוטין לתבנית הקודמת.

[xyz]

תבנית שכתובה באופן זה מתאימה לכל תו שאיננו מופיע ברשימת התווים xyz. גם בתבנית מסוג זה ניתן לרשום שני תווים וקו הפרדה ביניהם כתחליף לרשימה ארוכה של תווים. כלומר, התבנית /^fghijk/ זהה בפעולתה לתבנית /^f-k/.

[^xyz]

תבנית שבאה לבדוק את הימצאותו של backspace במחרוזת הנבדקת. יש לשים לב לכך ש-[\b] שונה מ- \b.

[\b]

תבנית שמתאימה לכל מה שיכול להקדים את תחילתה של מילה או להופיע בסופה, כגון, ריווח יחיד או תו שורה חדשה. יש לשים לב להבדל בין \b ל- [\b]. באופן זה, תבנית הטקסט /\byoyo/ תתאים לתת המחרוזת "yoyo" שמופיעה כחלק מהמחרוזת "yoyogym".

\b

ההיפך מ-\b. \B מייצגת כל תו שאיננו יכול להוות את סופה או את התחלתה של מילה חדשה.

\B

צירוף זה מייצג כל סיפרה אפשרית. כך למשל, תבנית הטקסט /\d\d\d/ תתאים לתת המחרוזת "123" ששייכת למחרוזת "132456".

\d

צירוף זה מייצג כל תו שאיננו סיפרה. צירוף זה זהה, למעשה, ל- [^0-9]. כך למשל, תבנית הטקסט [\D\d\d\d] תתאים לתת המחרוזת "H262" שמופיעה כחלק מהמחרוזת "Whar a nice H262 perfume".

\D

צירוף זה מתאים לתו המיוחד \f (form-feed).

\f

צירוף זה מתאים לכל ריווח לבן שמופיע במילה, בין אם הוא תוצאה של מקש הריווח או מקש ה-tab.

\s

צירוף זה מתאים לכל תו שאיננו מייצג ריווח לבן.

\S

צירוף זה מתאים לכל tab אנכי.

\v

צירוף זה מתאים לכל תו שהוא סיפרה או אות ולרבות הקו התחתי.

\w

צירוף זה מתאים לכל תו שאיננו סיפרה ואיננו אות וגם איננו קו תחתי.

\W

 

 

אופן השימוש בתבניות טקסט

 

המתודות שבאמצעותן עושים שימוש בתבניות הטקסט הן המתודות test ו- exec שניתנות להפעלה על אובייקט מטיפוס RegExp, והמתודות match, replace, search ו- split שניתנות להפעלה על אובייקט מטיפוס String.

 

המתודה test

מתודה זו מופעלת על אובייקט מטיפוס RegExp. מתודה זו מקבלת כארגומנט מחרוזת תווים אחת ומחזירה true או false בהתאם להימצאותה/אי הימצאותה של תבנית הטקסט (מיוצגת על ידי אובייקט ה-RegExp) בתוכה. מתודה זו נתמכת על ידי InternetExplorer 4 ו- Netscape Nevigator 4 ואילך.

 

התכנית הבאה מדגימה את השימוש במתודה זו.

 

<!-- file name : testDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>testDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /abc/;

      var str = new String("abcdefg");

      if (reg.test(str))

        document.write("<BR>The test method returned true");

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

המתודה exec

מתודה זו מופעלת על אובייקט מטיפוס RegExp. מתודה זו מקבלת כארגומנט מחרוזת תווים אחת ומחזירה מערך (אובייקט מסוג מערך) אשר כולל בתוכו אינפורמציה בנוגע להימצאות תבנית הטקסט בתוך המחרוזת שנבדקה. מתודה זו נתמכת על ידי InternetExplorer 4 ו- Netscape Nevigator 4 ואילך. האובייקט שמוחזר כולל את האינפורמציה הבאה:

1.       התכונה index כוללת בתוכה את מספר האינדקס (מתחיל ב-0) של התו שהחל ממנו מתחילה ההתאמה הראשונה.

2.       התכונה input כוללת בתוכה את מחרוזת התווים שנשלחה אל exec.

3.       התא הראשון במערך, [0], כולל בתוכו את תת המחרוזת הראשונה שנמצאה כמתאימה לתבנית הטקסט.

4.       יתר התאים במערך, [1]..[n], כוללים בתוכם את כל המחרוזות שנמצאו מתאימות לאותם חלקים של מחרוזת התבנית אשר סומנו בסוגריים.

אם המתודה exec לא מצליחה למצוא התאמה בין תבנית הטקסט למחרוזת הנתונה אז היא מחזירה null, אשר ב-JavaScript נחשב ל-false.

 

התכנית הבאה מדגימה את השימוש במתודה זו.

<!-- file name : execDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>execDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /(\d\d)NIS and (\d\d)\$/;

      var str = new String("The price of 1 egg is 90NIS and 18$");

      str = str + "and the price of 1 bread is 44NIS and 22$ with no tax , yes indeed";

      var vecReturned;

      if (vecReturned = reg.exec(str))

      { 

        document.write("<BR>The index where the RegExp matches the string is : "

          + vecReturned.index);

        document.write("<BR>The string that was checked is : "

          + vecReturned.input);                

        document.write("<BR>The substring which is the first recent match is : "

          + vecReturned[0]);      

        document.write("<BR>The parenthesized component matches are : ");

        var index;

        for (index=1; index<vecReturned.length; index++)

        {

          document.write("<BR>vecReturned["+index+"] = "+vecReturned[index]);

        }

      }

      else

      {

        document.write("<BR>The RegExp wasn't found");

      }

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

המתודה match

מתודה זו מופעלת על אובייקט מטיפוס String. מתודה זו מקבלת כארגומנט אובייקט מטיפוס RegExp, וליתר דיוק, reference לאובייקט מטיפוס RegExp, ומחזירה מערך אשר כולל בתוכו אינפורמציה בנוגע להתאמתה של מחרוזת התבנית למחרוזת שעליה המתודה הופעלה. מתודה זו נתמכת על ידי InternetExplorer 4 ו- Netscape Nevigator 4 ואילך. האובייקט שמוחזר כולל בכל אחד מאיבריו את תתי המחרוזות שמתאימות למחרוזת התבנית. כאן המקום לציין שלתבנית הטקסט ניתן להוסיף את הסיומות הבאות: g , i  או אפילו את שתיהן. בהוספת הסיומת i תבנית הטקסט לא תהיה רגישה להבדלים בין אותיות קטנות וגדולות. בהוספת הסיומת g תבנית הטקסט תיחשב לגלובלית. משמעות היותה של תבנית טקסט גלובלית היא שמתודות, כגון זו, יבצעו את החיפוש שוב ושוב עד אשר הן תגענה לסוף המחרוזת.

אם המתודה match לא מצליחה למצוא התאמה בין תבנית הטקסט למחרוזת הנתונה אז היא מחזירה null, אשר ב-JavaScript נחשב ל-false.

 

התכנית הבאה מדגימה את השימוש במתודה זו. כדי להבין את משמעות הוספת האות g לאובייקט ה-RegExp כדאי לנסות ולהריץ את הדוגמא מבלי ש-reg יכלול את האות g בסופה.

 

 

<!-- file name : matchDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>matchDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /\d\d\d/g;

      var str = new String("The prices are : 234NIS 432NIS 562NIS");

      var vecReturned;

      if (vecReturned = str.match(reg))

      { 

        document.write("<BR>Count = " + vecReturned.length);

        for(index=0; index<vecReturned.length; index++)

        {

          document.write("<BR>vecReturned["+index+"] = "+vecReturned[index]);

        }

      }

      else

      {

        document.write("<BR>The RegExp wasn't found");

      } 

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

 

המתודה replace

מתודה זו מופעלת על אובייקט מטיפוס String. מתודה זו מקבלת שני ארגומנטים: ארגומנט אחד הוא אובייקט מטיפוס RegExp, וליתר דיוק, reference לאובייקט מטיפוס RegExp, ואובייקט שני הוא מחרוזת תווים, וליתר דיוק, reference לאובייקט מטיפוס String. המתודה מחליפה כל תת מחרוזת שמתאימה למחרוזת התבנית במחרוזת התווים שהיא קיבלה כארגומנט שני. המתודה מחזירה את מחרוזת התווים שעליה היא פעלה לאחר שההחלפות בוצעו. מתודה זו נתמכת החל מ- InternetExplorer 4 ו- Netscape Nevigator 4.  בדומה למתודה הקודמת, גם בהפעלת מתודה זו יש להוסיף אל סוף מחרוזת התבנית את הסיומת g כדי שכל ההחלפות תתבצענה.

 

התכנית הבאה מדגימה את השימוש במתודה זו.

 

<!-- file name : replaceDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>replaceDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /NIS/g;

      var str1 = new String("The prices are 234NIS 432NIS 562NIS");

      var str2 = str1.replace(reg,"SHEKEL")

      document.write("<BR>The string before the replacement is : "

        + str1);            

      document.write("<BR>The string after the replacement is : "

        + str2);            

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

המתודה search

מתודה זו מופעלת על אובייקט מטיפוס String. מתודה זו מקבלת כארגומנט מחרוזת תבנית אחת ומחזירה את מספר האינדקס שבו היא מצאה עבורה את ההתאמה הראשונה במחרוזת שעליה היא הופעלה. אם לא נמצאה כל התאמה בין מחרוזת התבנית למחרוזת שעליה המתודה search הופעלה אז המתודה מחזירה -1. מתודה זו נתמכת החל מ- InternetExplorer 4 ו- Netscape Nevigator 4. 

 

התכנית הבאה מדגימה את השימוש במתודה זו.

 

<!-- file name : searchDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>searchDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /NIS/;

      var str1 = new String("The prices are 234NIS 432NIS 562NIS");

      counter = str1.search(reg);

      document.write("<BR>Counter = " + counter);

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

                                                                                                                                     

 

המתודה split

מתודה זו מופעלת על אובייקט מטיפוס String. המתודה מקבלת בעת הפעלתה ארגומנט אחד שהוא מחרוזת תבנית שעל פיה היא מחלקת את המחרוזת לתתי מחרוזות ומחזירה מערך שאיבריו הם ה-references לאותן תתי מחרוזות. מתודה זו נתמכת החל מ- Internet Explorer 4 ו- Netscape Nevigator 3.

 

התכנית הבאה מדגימה את פעולתה.

 

 <!-- file name : splitDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>splitDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /_/;

      var str1 = new String("Haim_Dany_Rony_Asher");

      var vec = str1.split(reg);

      for (index=0; index< vec.length; index++)

      {

        document.write("<BR>vec["+index+"] = " + vec[index]);

      }                       

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

 

 

 

 

השימוש בסוגריים בתוך מחרוזת התבנית

 

ניתן לסמן חלקים מתוך מחרוזת התבנית באמצעות סוגריים עגולות. חלקים שמסומנים בסוגריים עגולות ושנמצאה עבורם התאמה במחרוזת שבה מתבצע החיפוש, יועתקו אל משתנים ששייכים לאובייקט RexExp. משתנים אלה נקראים בשמות $!, $2, $3, $4, $5 וכך הלאה עד $9. כמספר החלקים שיסומנו מתוך מחרוזת התבנית כך גם מספר המשתנים (מתוך הקבוצה $1, $2 וכו'...) אשר יעשה בהם שימוש. הערכים שסומנו בסוגריים עגולות יישלחו גם כאיבריו של המערך אשר מוחזר על ידי המתודה match, וגם על ידי מספר מתודות אחרות.

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

 

<!-- file name : parenthesizeDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

<HTML>

 

  <HEAD>

    <TITLE>parenthesizeDemo.html</TITLE>

    <SCRIPT LANGUAGE="JavaScript1.3">

      var reg = /(\d)\d(\d)/;

      var str = new String("The prices are : 234NIS 432NIS 562NIS 444NIS");

      var vecReturned;

      if (vecReturned = str.match(reg))

      {         

        document.write("<BR>Count = " + vecReturned.length);

        for(index=0; index<vecReturned.length; index++)

        {

          document.write("<BR>vecReturned["+index+"] = "+vecReturned[index]);

        }

        document.write("<BR>RegExp.$1="+RegExp.$1); document.write("<BR>RegExp.$2="+RegExp.$2);        

        document.write("<BR>RegExp.$3="+RegExp.$3);        document.write("<BR>RegExp.$4="+RegExp.$4);  

             }

           else

          {

        document.write("<BR>The RegExp wasn't found");

      }         

    </SCRIPT> 

   </HEAD>

 

  <BODY>

  </BODY>

 

</HTML>

 

 

תרגילים

 

1.       כתוב/כתבי תכנית ב-JavaScript אשר תחליף את כל המופעים של הסימן $ במחרוזת טקסט מסויימת בסימן NIS , וכמו כן, תמיר את הערכים המספריים שמופיעים בה לפני הסימן $ מדולרים לשקלים.

2.       כתוב/כתבי תכנית ב-JavaScript אשר תחליף את כל המופעים של מספרים עם שבר עשרוני למספרים שלמים. התכנית תעגל את המספרים בהתאם.

3.       כתוב/כתבי תכנית ב-JavaScript אשר תכלול פונקציה אשר בודקת מחרוזת טקסט כדי לדעת אם היא מהווה כתובת דואר אלקטרוני לפי כל הכללים הקיימים.

 

 

 

 

 

 

 

 

 

2000 © All the rights reserved to Haim Michael & Zindell Publishing House Ltd.

 

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher !  This book can be used for personal use only !!!

 

 

Brought to you by Zindell 

(http://www.zindell.com)

 

 

 

 

 

 

לנוחיותך, להלן תוכן העניינים של הספר:

 

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect