Im letzten Teil hatte ich ein wenig die Grundlagen von RegExp aufgezeigt. Dort knüpfen wir einfach an und schauen mal, was wir noch so machen können.
Ich hatte geschrieben, dass es möglich ist, Strings zu vertauschen. Das ist der erste Punkt, den wir uns jetzt mal anschauen werden.
1 <script>
2 var reg = /(\w*)-*(\w*)/;
3 var str = "Java--Script";
4 var result = str.replace(reg, "$2-$1");
5 document.writeln(result);
6
7 //Ausgabe:
8 //Script-Java
9 </script>
Na, sofort verstanden, was hier passiert? Sieht schon etwas anders aus, als die letzten Beispiele. Wo kommen denn eigentlich diese “$”-Zeichen her? Kurz erklärt, was genau hier passiert.
Zunächst erstellen wir einen Ausdruck und speichern diesen in der Variable reg. Der Ausdruck /(\w*) heißt, er findet alle alphanummerischen Zeichen inklusive dem Unterstrich. Wir könnten den Ausdruck auch so schreiben: [A-Za-z0-9_]. Jetzt sind aber auch noch runde Klammern in dem Ausdruck vorhanden. Diese Klammern speichern Substrings. Und diese Substrings können dann durch die speziellen Reg-Elemente angesprochen werden. ($1, $2…). In dem Beispiel oben wird der String “Java—Script” vertauscht, indem die Replace-Methode angewendet wird. Die Expression findet “Java—Script” und soll es durch die Werte in “$2” und “$1” ersetzen. Alternativ könnten wir es auch wie folgt vertauschen:
1 <script>
2 var str = "Sebastian-Masloch";
3 var ausdruck = /(\w.+)-(\w.+)/;
4 ausdruck.exec(str);
5 document.write(RegExp.$2 + ", " + RegExp.$1);
6 document.write("<br>");
7 document.writeln(ausdruck.exec(str));
8 //Ausgabe
9 //Masloch, Sebastian
10 //Sebastian-Masloch, Sebastian, Masloch
11 </script>
Hier passiert nichts anderes. Nur benutzen wir hier die exec-Methode. Diese Funktion gibt ein Array zurück, in dem das Match steht, sofern es eines gibt, und zusätzlich stehen dort nun auch die Werte, die durch die runden Klammern extra gespeichert werden (Siehe die letzte Ausgabe). Zugriff erfolgt dann über RegExp.$1—$9;
An dieser Stelle zeige ich euch noch ein paar kleine Beispiele, was man noch so alles in einem Ausdruck unterbringen kann.
1 <script>
2 var text = "Dies ist jetzt nur ein Beispiel, um ein paar kleine " +
3 "Ausdrücke vorzuführen. Hier steht auch nichts interessantes " +
4 "drin. Damit wir etwas Abwechslung bekommen, schreiben wir doch mal " +
5 "ein paar Zahlen hinein. 017066998855 oder 18789 und dann noch 1417898. " +
6 "Vielleicht etwas mehr Freiraum oder sogar ein Tabulator\t. Auch eine neue " +
7 "Zeile wäre doch\n etwas. Dann haben wir einiges, was wir suchen können.";
8
9 //Sucht alle Leerzeichen - Ausgabe:63
10 var reg = /\s/ig;
11 document.writeln("Ausgabe Leerzeichen: " + text.match(reg).length + "<br>");
12
13 //Sucht alle Tabulatoren - Ausgabe: 2
14 //Findet \t und den normalen Druck auf die Tab-Taste
15 var reg = /\t/ig;
16 document.writeln("Ausgabe Tab: " + text.match(reg).length + "<br>");
17
18 //Sucht alle Zeilenumbrüche - Ausgabe:1
19 var reg = /\n/ig;
20 document.writeln("Ausgabe Zeilenumbrüche: " + text.match(reg).length + "<br>");
21
22 //Sucht alle "Ei" am Anfang/ende einies Wortes - Ausgabe: 6 mal ei
23 var reg = /\bei/ig;
24 document.writeln("Ausgabe \"Ei\": " + text.match(reg) + "<br>");
25
26 //Sucht alle "Ei" mitten im Wort - Ausgabe: 7 mal ei
27 var reg = /\Bei/ig;
28 document.writeln("Ausgabe \"Ei\": " + text.match(reg) + "<br>");
29
30 //Sucht alle "ei" gefolgt von "ne" - Ausgabe: 2 mal ei
31 var reg = /ei(?=ne)/ig;
32 document.writeln("Ausgabe \"Ei\" gefolgt von \"ne\": " + text.match(reg) + "<br>");
33
34 //Sucht alle "W"" in Octal - Ausgabe: 10
35 var reg = /\127/ig;
36 document.writeln("Ausgabe von \"W\" in Oktal: " + text.match(reg).length + "<br>");
37
38 //Sucht alle "W" in Hexadecimal - Ausgabe: 10
39 var reg = /\x57/ig;
40 document.writeln("Ausgabe von \"W\" in Hexadecimal: " + text.match(reg).length + "<br>");
41 </script>
Es soll natürlich nicht so einfach bleiben. Wozu nutzt man denn reguläre Ausdrücke noch, außer um sich durch Texte zu wühlen? Validierung ist immer eine gute Stelle für RegExp. An der Stelle kann es auch schon komplexer werden und die Ausdrücke sehr unübersichtlich erscheinen. Fangen wir mal klein an. Wenn wir eine Postleitzahl eingeben, soll diese natürlich nur aus Ziffern bestehen und nicht irgendwelchen anderen Zeichen. Dank HTML 5 müssen wir da auch keine großartige Funktion schreiben, sondern wir benutzen einfach das “pattern”-Attribut von <input>. Dem übergeben wir einen Ausdruck und er wird automatisch beim Sendeversuch auf das Feld angewandt. Wir können zusätzlich auch sagen, dass der Vorname nur aus Buchstaben bestehen soll. Dazu direkt ein Beispiel.
1 <form>
2 <table>
3 <tr>
4 <td>Vorname: </td>
5 <td><input type="text" pattern="[A-Za-z]*"></td>
6 </tr>
7 <tr>
8 <td>PLZ: </td>
9 <td><input type="text" pattern="\d{5}"></td>
10 </tr>
11 <tr>
12 <td>E-Mail: </td>
13 <td> <input type="email"></td>
14 </tr>
15 <tr>
16 <td><input type="submit" value="Check"></td>
17 </tr>
18 </table>
19 </form>
Ich habe schnell zwei Pattern eingefügt. pattern=”[A-Za-z]*" Überprüft, ob das Textfeld nur entsprechende Buchstaben enthält. pattern=”\d{5}” macht auch nicht viel mehr, als zu überprüfen, ob die Eingabe genau 5 Zahlen enthält. Der Wert in den geschweiften Klammern gibt die Anzahl erforderlicher Zeichen an. Geben wir was falsches ein, sieht es im Edge so aus:
Nun seht ihr ja schon, dass ich noch ein Feld vom Typ “E-Mail” mit dabei habe. Hier überprüft er, wie bei Typ “Number” schon automatisch. Jedoch ist es so bei der E-Mail nicht getan. Die vorgegebene Validierung checkt nur, ob ein @-Zeichen vorhanden ist und ein Zeichen davor steht. Also a@a wäre schon gültig. Für ein Formular wollen wir selbstverständlich eine gültige Form einer E-Mail haben. Ich zeige es euch mal schnell.
1 <tr>
2 <td>E-Mail: </td>
3 <td> <input type="email" pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"></td>
4 </tr>
Das sieht doch schon nach mehr aus, als nur ein kleiner Ausdruck. Aber auch hier ist nichts wirklich besonderes dran. Schlüsseln wir ihn doch einfach wieder auf. Fangen wir mit dem “^” an. Was dort hinter steht, muss am Anfang stehen, damit die Überprüfung stimmt.Unsere Mail muss also mit einem Zeichen aus den eckigen Klammern beginnen. Danach folgt irgendwann ein @-Zeichen. Dann wieder eine Eingabe von bestimmten Zeichen gefolgt von einem Punkt. Der nächste Block erfordert eine Eingabe von 2-4 Zeichen. Das “$”-Zeichen gibt das Ende der Zeichenkette an. Damit ist dann eine gültige Mail wie zum Beispiel: hansmeier@test.de erforderlich.
Auch das ist natürlich nur ein Überblick über das, was so machbar ist. Wir können uns jetzt austoben was reguläre Ausdrücke angeht und sehr komplexe Regeln aufstellen. Damit soll es das aber auch gewesen sein. Ab jetzt darf jeder mal selber die ganzen Möglichkeiten kombinieren und eigene Ausdrücke erstellen.