Webseiten erstellen mit Javascript

Kapitel 3: Reguläre Ausdrücke

Inhaltsverzeichnis

Dieses Buch ist unter einer Creative Commons-Lizenz lizensiert.

3.1 Allgemeines

Zeichenketten mit Schemas vergleichen

In Computer-Anwendungen ist es häufig notwendig, Zeichenketten mit anderen Zeichenketten zu vergleichen. Während Vergleichsoperatoren eine Überprüfung auf Gleichheit oder Ungleichheit ermöglichen, ist eine Überprüfung einer Zeichenkette auf Gleichheit mit einem Muster nicht möglich.

Stellen Sie sich vor, Sie fordern den Anwender in einem Kontaktformular einer Webseite auf, seine E-Mail-Adresse einzugeben. Damit der Anwender keinen Blödsinn eingibt bzw. um ihn vor Tippfehlern zu schützen, möchten Sie die Eingabe daraufhin überprüfen, ob sie mit dem Muster einer E-Mail-Adresse überstimmt. Das heißt, die E-Mail-Adresse muss genau ein @-Zeichen besitzen. Diesem @-Zeichen muss mindestens ein anderes Zeichen vorangehen, hinter ihm müssen mehrere Zeichen durch mindestens einen Punkt getrennt folgen. Mit den Vergleichsoperatoren kommen Sie hier nicht weiter, wenn Sie die Eingabe des Anwenders auf das vorgegebene Muster überprüfen möchten.

Das Überprüfen von Daten auf Gültigkeit kann ein sehr schwieriges Unterfangen sein. Je nach Komplexität der zu erwartenden Daten kann die Überprüfung auf Gültigkeit sehr kompliziert werden. Ein leistungsfähiges Instrument auch für komplexe Datenüberprüfungen stellen reguläre Ausdrücke dar.

Die Technik der regulären Ausdrücke stammt eigentlich aus einem anderen Bereich, nämlich dem der Mathematik und Künstlichen Intelligenz. Die Ursprünge gehen zurück in die 60er Jahre, in denen mathematische Verfahren zur Beschreibung von neuralen Netzwerken entwickelt wurden. Diese Verfahren wurden aufgegriffen und von einem der ursprünglichen Entwickler des Betriebssystems Unix in einen Texteditor eingebaut. Reguläre Ausdrücke sind in diesem Zusammenhang als Text-Suchen-und-Ersetzen-Funktionen wichtig.

Reguläre Ausdrücke sind sehr mächtig, ermöglichen also mit wenigen Programmzeilen eine sehr hohe Funktionalität. Ohne reguläre Ausdrücke müssten Sie teilweise erheblich viel Zeit investieren, um die Funktionalität jeweils nachbilden zu können. Der Preis für die hohe Leistungsfähigkeit ist jedoch eine auf den ersten Blick recht komplizierte Syntax. Es lohnt sich jedoch, diese Syntax einmal zu erlernen, da reguläre Ausdrücke in der Programmentwicklung verschiedene Aufgaben sehr stark vereinfachen können, die ohne Verwendung von regulären Ausdrücken größere Programmierprobleme darstellen.

3.2 Grundsätzliche Syntax

Metazeichen und andere Konstrukte

Der Einstieg in reguläre Ausdrücke gelingt über ein Beispiel am einfachsten.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var input; 
      var expression = /^\d{2}$/; 
      var result; 

      input = prompt("Geben Sie eine zweistellige Zahl ein."); 
      result = expression.test(input); 
      if (result == true) { 
        alert("Eingabe korrekt!"); 
      } else { 
        alert("Eingabe falsch!"); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

Im Beispiel wird der Anwender aufgefordert, eine zweistellige Zahl einzugeben. Die Eingabe wird in der Variablen input gespeichert. Diese Variable wird als Parameter der Methode test() übergeben. Wie üblich wird eine Methode für ein Objekt aufgerufen, das hier expression heißt. Diese Variable muss einen regulären Ausdruck enthalten. In Javascript sehen reguläre Ausdrücke so aus, dass sie zwischen / und / gesetzt werden. Alles, was zwischen diesen beiden Zeichen steht, definiert den regulären Ausdruck. In der Variablen result wird das Ergebnis des Funktionsaufrufs von test() gespeichert. Stimmen die eingegebenen Daten des Anwenders mit dem regulären Ausdruck überein, gibt test() den Wahrheitswert true zurück, andernfalls false.

Vergessen Sie nicht, dass sich obige Syntax ganz speziell auf die Programmiersprache Javascript bezieht. Reguläre Ausdrücke stehen auch in anderen Programmiersprachen zur Verfügung, nur ist die Verwendung anders definiert. Sie arbeiten also mit anderen Objekten, rufen andere Funktionen auf, übergeben andere Parameter und so weiter.

var expression = /^\d{2}$/;

Der entscheidende Bestandteil des Code-Beispiels ist der merkwürdig aussehende reguläre Ausdruck. Das erste und letzte Zeichen, nämlich /, definiert Anfang und Ende des regulären Ausdrucks - jedenfalls in Javascript. Was zwischen diesen beiden Zeichen steht, ist der eigentliche reguläre Ausdruck. Dieser Ausdruck ist mehr oder weniger standardisiert. Das heißt, sie können ihn meist ohne Probleme direkt so innerhalb einer anderen Programmiersprache verwenden.

Reguläre Ausdrücke besitzen Metazeichen. Metazeichen sich Zeichen, die eine ganz bestimmte Bedeutung haben. Nicht zu den Metazeichen gehören beispielsweise die Buchstaben. Der Buchstabe A bedeutet auch in regulären Ausdrücken nichts besonders, sondern eben nur A. Der im Beispiel verwendete reguläre Ausdruck besteht jedoch nur aus Metazeichen: Das ^ bedeutet Zeilenanfang. Das \d bedeutet Zahl (digit). Die Klammer {} bedeutet, das die Einheit vor der Klammer eine ganz bestimmte Häufigkeit besitzen muss. In den geschweiften Klammern wird dabei angegeben, wie oft genau. Im Beispiel wurde {2} verwendet. Das heißt, die Einheit direkt vor den geschweiften Klammern muss genau zweimal auftreten. Die direkte Einheit vor den geschweiften Klammern ist \d. Das heißt also, es müssen genau zwei Zahlen angegeben werden. Hinter der geschlossenen geschweiften Klammer folgt ein $. Dabei handelt es sich um das Gegenstück zu ^: Es bedeutet nicht Zeilenanfang, sondern Zeilenende. Der reguläre Ausdruck ausgeschrieben lautet also: Es müssen direkt zu Zeilenbeginn zwei Ziffern angegeben werden, denen kein anderes Zeichen folgen darf.

3.3 Komplexe Ausdrücke

Von Unterausdrücken und Zeichengruppen

Reguläre Ausdrücke kennen folgende Metazeichen: \, ^, $, *, +, ?, {}, ?, ., (), | und []. Nur wenn eines dieser Zeichen in einem regulären Ausdruck auftritt, müssen Sie sich Gedanken machen, was es für eine besondere Bedeutung hat.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var input; 
      var expression = /\w{5,}\.?\s+\d+/; 
      var result; 

      input = prompt("Geben Sie Strasse und Hausnummer ein."); 
      result = expression.test(input); 
      if (result == true) { 
        alert("Eingabe korrekt!"); 
      } else { 
        alert("Eingabe falsch!"); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

Im obigen Code-Beispiel wird der Anwender aufgefordert, Strasse und dann Hausnummer einzugeben. Die Strasse darf hierbei aus Buchstaben bestehen und darf gegebenenfalls mit einem Punkt enden. Die Hausnummer darf nur aus Ziffern bestehen. Strassenname und Hausnummer müssen mit Leerzeichen voneinander getrennt sein.

var expression = /\w{5,}\.?\s+\d+/;

Der reguläre Ausdruck setzt die Bedingungen wie folgt um: \w ist ein beliebiger Buchstabe (word). Mit {5,} ist definiert, dass mindestens 5 Buchstaben angegeben werden müssen. Die obere Grenze hingegen ist offen, der Strassenname kann also beliebig lang werden. Hinter dem Strassennamen kann ein Punkt angegeben sein - entweder ist keiner angegeben oder genau einer. Diese Einmal-oder-Keinmal-Bedingung wird durch das ? festgelegt. Wie immer bei Angaben zur Häufigkeit von Zeichen bezieht sich auch dieses auf die Einheit davor. Vor dem ? steht ein \.. Der . ist eigentlich ein Metazeichen. Wenn Sie jedoch den Punkt nicht als Metazeichen verwenden wollen, sondern eben als Punkt selber, setzen Sie einfach ein \ davor. Hinter dem Punkt muss mindestens ein Leerzeichen kommen. Leerzeichen werden mit \s definiert (space). Die Bedingung Mindestens-Einmal wird mit dem + festgelegt, das sich ebenfalls wieder auf die Einheit davor bezieht. Nach dem oder den Leerzeichen folgt eine Zahl (\d) mit mindestens einer Ziffer (+). Der reguläre Ausdruck bedeutet also ausgeschrieben: Geben Sie einen Strassennamen an, der aus mindestens 5 Buchstaben besteht und gegebenenfalls mit einem Punkt endet. Trennen Sie durch ein oder mehr Leerzeichen vom Strassennamen eine Zahl bestehend aus mindestens einer Ziffer.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var input; 
      var expression = /^[\d\(\)\/]{4,13}$/; 
      var result; 

      input = prompt("Geben Sie Ihre Telefonnummer an."); 
      result = expression.test(input); 
      if (result == true) { 
        alert("Eingabe korrekt!"); 
      } else { 
        alert("Eingabe falsch!"); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

Nun soll der Anwender seine Telefonnummer eingeben. Da der Anwender eventuell seine Vorwahl durch Klammern oder einen Schrägstrich von seiner Rufnummer trennen möchte, müssen wir auch diese Zeichen erlauben. Dies erfolgt durch die neuen Metazeichen []. Zwischen diesen werden jeweils gültige Zeichen angegeben. Im Beispiel steht zwischen den eckigen Klammern \d für Ziffern (digit), \( und \) für runde Klammern und \/ für den Schrägstrich. Beachten Sie wieder, dass runde Klammern normalerweise Metazeichen darstellen. Da sie aber explizit auf das Vorhandensein von runden Klammern in der Eingabe überprüfen möchten, müssen Sie durch Voranstellen von \ aus den Metazeichen gewöhnliche Zeichen machen. Dies gilt auch für den Schrägstrich, der normalerweise den regulären Ausdruck in Javascript beendet. Die zwischen [] festgelegten Zeichen müssen mindestens viermal, höchstens aber dreizehnmal vorkommen. Dies wird durch {4,13} festgelegt, das sich wie immer auf die Einheit davor bezieht - also auf die gesamte eckige Klammer.

var expression = /.*/;

Die beiden Metazeichen, die Sie noch nicht kennen, sind . und |. . bedeutet genau ein beliebiges Zeichen. Obiger regulärer Ausdruck ermöglicht also jede beliebige Eingabe. Ein beliebiges Zeichen (.) darf beliebig oft vorkommen (*).

var expression = /fuss(pilz|ball)/;

Das Metazeichen | ist ein Oder-Zeichen. Obiger regulärer Ausdruck erlaubt also die Eingabe von fusspilz und fussball. Hinter fuss ist sowohl die Buchstabenkombination pilz als auch ball erlaubt.

Neben der Überprüfung auf Gültigkeit können reguläre Ausdrücke verwendet werden, um Eingaben in einzelne Bestandteile zu zerlegen oder um Zeichenkombinationen durch andere zu ersetzen. Aufgrund ihrer Vielseitigkeit sind reguläre Ausdrücke für viele Aufgaben geeignet.

3.4 Aufgaben

Übung macht den Meister

Sie können die Lösungen zu allen Aufgaben in diesem Buch als ZIP-Datei erwerben.

  1. Überprüfen Sie die Eingabe des Anwenders auf eine gültige Kreditkartennummer. Gültige Kreditkartennummern bestehen wie im Internet üblich ausschließlich und genau aus 16 Ziffern.

  2. Überprüfen Sie die Eingabe des Anwenders auf Postleitzahl und Ort. Die Postleitzahl muss aus fünf Ziffern bestehen, der Ort aus mindestens vier und maximal 20 Buchstaben. Postleitzahl und Ort müssen durch mindestens ein Leerzeichen getrennt sein. Die Ortsangabe darf auch die Umlaute ä, ö und ü enthalten.

  3. Ergänzen Sie Ihre Lösung zu Aufgabe 2 insofern, dass der Anwender vor der Postleitzahl D für Deutschland, A für Österreich und CH für die Schweiz angeben darf. Die Landeskennung wird von der Postleitzahl durch mindestens ein Leerzeichen getrennt oder aber zusätzlich durch genau einen Bindestrich.

  4. Überprüfen Sie die Eingabe des Anwenders auf einen gültigen Euro oder Dollar-Betrag. Die Eingabe ist dann gültig, wenn Sie mit mindestens einer Ziffer beginnt, gegebenenfalls genau zwei Nachkommastellen enthält, und dann durch mindestens ein Leerzeichen getrennt die Währungssymbole EUR oder $.

Copyright © 2001-2010 Boris Schäling