6.2 Zeichenketten verarbeiten
Zeichenketten (englisch: strings) haben Sie bereits kennengelernt. Sie dienen zur Speicherung von Texten, die z. B. von Eingaben des Benutzers stammen. Zeichenketten weisen Ähnlichkeiten mit Feldern auf. Die einzelnen Zeichen einer Zeichenkette sind nummeriert, beginnend bei 0. Die Nummer oder Position eines Zeichens wird auch Index genannt.
Zum Lesen und zum Verändern von Zeichenketten kann das String-Objekt mit seinen Eigenschaften und Methoden genutzt werden. Den Operator + zum Verketten von Zeichenketten und den kombinierten Zuweisungsoperator += zum Verlängern einer Zeichenkette haben Sie bereits in einigen Beispielen kennengelernt.
6.2.1 Zeichenketten erzeugen und prüfen
Im nachfolgenden Programm wird eine Zeichenkette erzeugt und seine Länge ermittelt. In ECMAScript 2015 wurden die Methoden includes(), startsWith() und endsWith() eingeführt. Mit ihrer Hilfe kann festgestellt werden, ob eine Zeichenkette eine andere Zeichenkette beinhaltet, mit einer anderen Zeichenkette beginnt oder mit ihr endet. Zunächst das Programm:
...
<body><p>
<script>
var tx = "info@lehre.rz.uni-bonn.de";
document.write("Text: " + tx + "<br>");
document.write("Länge: " + tx.length + "<br>");
document.write("Länge: " + "uni-bonn".length + "<br>");
if(String.prototype.includes)
{
document.write("Enthält 'lehre': "
+ tx.includes("lehre") + "<br>");
document.write("Enthält 'Lehre': "
+ tx.includes("Lehre") + "<br>");
document.write("Enthält 'lehre' ab 6: "
+ tx.includes("lehre", 6) + "<br>");
}
if(String.prototype.startsWith)
{
document.write("Beginnt mit 'info': "
+ tx.startsWith("info") + "<br>");
document.write("Beginnt mit 'info' ab 1: "
+ tx.startsWith("info", 1) + "<br>");
}
if(String.prototype.endsWith)
{
document.write("Endet mit 'de': "
+ tx.endsWith("de") + "<br>");
document.write("Endet mit 'de' vor 24: "
+ tx.endsWith("de", 24) + "<br><br>");
}
</script></p>
</body></html>
Listing 6.14 Datei »string_pruefen.htm«
Der Variablen tx wird eine Zeichenkette mit einer E-Mail-Adresse zugewiesen. Die Eigenschaft length beinhaltet die Anzahl der Zeichen innerhalb der Zeichenkette. Eigenschaften und Methoden können nicht nur auf eine Variable angewandt werden, die auf ein String-Objekt verweist, sondern auch direkt auf eine Zeichenkette, die in Anführungszeichen steht, siehe "uni-bonn".length.
Der Methode includes() werden bis zu zwei Parameter übergeben. Beim ersten Parameter wird die Zeichenkette angegeben, nach der im String-Objekt gesucht wird. Beim zweiten, optionalen Parameter kann angegeben werden, ab welcher Position im String-Objekt gesucht wird.
Ähnlich sieht es bei der Methoden startsWith() aus. Bei der Methode endsWith() kann ein zweiter Parameter angegeben werden. In diesem Fall wird geprüft, ob das auf die angegebene Länge verkürzte String-Objekt mit der gesuchten Zeichenkette endet.
Es wird jeweils geprüft, ob die Methode im genutzten Browser bekannt ist. Die Ausgabe sehen Sie in Abbildung 6.14.
Abbildung 6.14 Zeichenkette erzeugen und prüfen
6.2.2 Elemente einer Zeichenkette
Die einzelnen Zeichen einer Zeichenkette lassen sich, wie bei einem Array, mithilfe der rechteckigen Klammern ermitteln. Dafür gibt es auch die Methode charAt().
Die Methode split() dient zum Aufsplitten einer Zeichenkette anhand einer Trennzeichenfolge. Es wird ein Array-Objekt mit den einzelnen Teilen der Zeichenkette erstellt. In diesem Zusammenhang wird noch einmal die Mehode join() des Array-Objekts gezeigt, die das Feld wiederum zu einer Zeichenkette zusammensetzt.
Die Methode fromCodePoint() erstellt eine Zeichenkette aus einer Abfolge von Unicode-Nummern. Die Methode codePointAt() liefert die Unicode-Nummer eines einzelnen Zeichens innerhalb einer Zeichenkette.
Es folgt ein Programm mit Beispielen:
...
<body><p>
<script>
var tx = "info@lehre.rz.uni-bonn.de";
document.write("Text: " + tx + "<br>");
document.write("Zeichen mit []: ");
for(let i=0; i<5; i++)
document.write(i + ":" + tx[i] + " ");
document.write("...<br>Zeichen mit Methode: ");
for(let i=0; i<5; i++)
document.write(i + ":" + tx.charAt(i) + " ");
document.write("...<br><br>");
document.write("Aufsplitten in Feld: ");
var feld = tx.split(".");
for(let i=0; i<feld.length; i++)
document.write(i + ":" + feld[i] + " ");
document.write("<br>");
var txNeu = feld.join(".");
document.write("Feld verbinden zu String: " + txNeu + "<br><br>");
var uc = String.fromCodePoint(97, 48, 65,
228, 246, 252, 196, 214, 220, 223);
document.write("Unicode-Nummern ergeben: " + uc);
document.write("<br>Zeichenkette ergibt Unicode-Nummern: ");
for(let i=0; i<uc.length; i++)
document.write(i + ":" + uc.codePointAt(i) + " ");
document.write("<br><br>");
</script></p>
</body></html>
Listing 6.15 Datei »string_elemente.htm«
Die einzelnen Zeichen werden auf zwei verschiedene Arten zusammen mit dem Index ausgegeben.
Anschließend wird die Zeichenkette anhand der Punkte aufgesplittet, also anhand der Trennzeichenkette ".". Die einzelnen Feldelemente enthalten die Trennzeichenkette selbst nicht. Mithilfe der Array-Methode join() und derselben Trennzeichenkette wird eine neue Zeichenkette aus den Feldelementen zusammengesetzt.
Die Methode fromCodePoint() wird für das String-Objekt selbst aufgerufen, da es sich nur um eine Abfolge von Unicode-Nummern handelt und noch nicht um eine Zeichenkette. Die kleinen Buchstaben haben die Unicode-Nummern 97 bis 122, die großen Buchstaben die Unicode-Nummern 65 bis 90 und die Ziffern die Unicode-Nummern 48 bis 57. Die deutschen Umlaute und das Eszett liegen außerhalb dieser regelmäßigen Abfolge. Die Methode codePointAt() liefert umgekehrt wiederum die Unicode-Nummern.
Die Ausgabe sehen Sie in Abbildung 6.15.
Abbildung 6.15 Elemente einer Zeichenkette
6.2.3 Suche und Teilzeichenketten
Die Methoden indexOf() und lastIndexOf() liefern den Index an der ersten bzw. letzten Position, an der eine Zeichenkette innerhalb einer anderen Zeichenkette beginnt. Wird die Zeichenkette nicht gefunden, wird der Wert -1 zurückgeliefert. Die Methoden substring() und substr() liefern die Kopie eines Teils der Zeichenkette zurück.
Es folgt ein Programm mit Beispielen:
...
<body><p>
<script>
var tx = "info@lehre.rz.uni-bonn.de";
document.write("Text: " + tx + "<br>");
document.write("Erster Punkt im Text: " + tx.indexOf(".") + "<br>");
document.write("Letzter Punkt im Text: " + tx.lastIndexOf(".") + "<br>");
document.write("Alle Punkte im Text: ");
var pos = tx.indexOf(".");
while(pos != -1)
{
document.write(pos + " ");
pos = tx.indexOf(".", pos+1);
}
document.write("<br>");
document.write("Teiltext von 4 bis Ende: "
+ tx.substring(4) + "<br>");
document.write("Teiltext von 4 bis vor 7: "
+ tx.substring(4,7) + "<br>");
document.write("Teiltext von 4, Länge 5: "
+ tx.substr(4,5) + "<br><br>");
</script></p>
</body></html>
Listing 6.16 Datei »string_position.htm«
Optional kann bei der Methode indexOf() eine Position angegeben werden, ab der gesucht werden soll. Bei der Methode lastIndexOf() kann optional angegeben werden, bis zu welcher Position gesucht werden soll.
Im vorliegenden Programm wird festgestellt, an welcher Stelle sich der erste und der letzte Punkt innerhalb der Zeichenkette befinden. Den zweiten Parameter nutzen wir hier, um die Positionen aller Punkte zu finden. Die Suche nach dem nächsten Punkt beginnt in der while-Schleife immer an der Position hinter dem letzten Punkt, der zuvor gefunden wurde.
Falls Sie bei den Methoden substring() und substr() jeweils nur einen Parameter angeben, wird der Teil der Zeichenkette geliefert, der an der genannten Position beginnt und bis zum Ende der Zeichenkette reicht. Der zweite, optionale Parameter gibt bei der Methode substring() an, welches Zeichen als erstes nicht mehr kopiert wird. Bei der Methode substr() wird damit die Anzahl der Zeichen festgelegt, die kopiert werden sollen.
Die Ausgabe sehen Sie in Abbildung 6.16.
Abbildung 6.16 Suche und Teilzeichenketten
6.2.4 Zeichenketten ändern
Es gibt eine Reihe von Methoden zum Ändern einer Zeichenkette. Die Methoden toUpperCase() und toLowerCase() ändern jeden Buchstaben in einen Großbuchstaben bzw. in einen Kleinbuchstaben. Die Methode replace() ersetzt das erste Vorkommen einer gesuchten Zeichenkette durch eine andere Zeichenkette. Im Zusammenhang mit regulären Ausdrücken gibt es noch weitaus mehr Änderungsmöglichkeiten, siehe Abschnitt 6.2.5.
Die Methode repeat() wurde mit ECMAScript 2015 eingeführt. Sie liefert die gewünschte Anzahl von Wiederholungen einer Zeichenkette. Die Methoden padStart() und padEnd() wurden mit ECMAScript 2017 eingeführt. Sie füllen eine Zeichenkette am Anfang oder am Ende mithilfe einer anderen, gegebenenfalls wiederholten Zeichenkette bis zu einer gewünschten Länge auf. Die Methode trim() wurde mit ECMAScript 2015 eingeführt. Sie entfernt alle Whitespace-Zeichen am Anfang und am Ende einer Zeichenkette. Dabei handelt es sich z. B. um Leerzeichen, Tabulatoren oder die Zeichen für das Ende einer Zeile.
Es folgt ein Programm mit Beispielen:
...
<body><p>
<script>
var tx = "info@lehre.rz.uni-bonn.de";
document.write("Text: " + tx + "<br>");
var tg = tx.toUpperCase();
document.write("Alles groß: " + tg + "<br>");
document.write("Alles wieder klein: "
+ tg.toLowerCase() + "<br>");
document.write("Ersetzen: "
+ tx.replace("bonn", "berlin") + "<br>");
if(String.prototype.repeat)
{
var ha = "Hallo";
var haw = ha.repeat(5);
document.write("Wiederholen: " + haw + "<br>");
}
if(String.prototype.padStart)
{
var has = ha.padStart(10,"xy");
document.write("Auffüllen am Anfang: " + has + "<br>");
var hae = ha.padEnd(10,"xy");
document.write("Auffüllen am Ende: " + hae + "<br>");
}
if(String.prototype.trim)
{
var tr = " Hallo Welt\t \n \r";
document.write("Vor dem Trimmen: ");
for(let i=0; i<tr.length; i++)
document.write(tr.codePointAt(i) + " ");
document.write("<br>Nach dem Trimmen: ");
var trneu = tr.trim();
for(let i=0; i<trneu.length; i++)
document.write(trneu.codePointAt(i) + " ");
document.write("<br>" + trneu);
}
</script></p>
</body></html>
Listing 6.17 Datei »string_aendern.htm«
In der Zeichenkette wird das erste (und in diesem Fall einzige) Vorkommen der Zeichenkette "bonn" durch "berlin" ersetzt. Die Zeichenkette "hallo" wird zum einen in fünffacher Wiederholung zurückgeliefert. Zum anderen wird sie mithilfe der Zeichenkette "xy" bis auf zehn Zeichen aufgefüllt, einmal am Anfang und einmal am Ende. Dabei wird die Zeichenkette "xy" zweimal vollständig und einmal unvollständig wiederholt.
Eine andere Zeichenkette beinhaltet vor dem Trimmen insgesamt 17 Zeichen, darunter einige Whitespace-Zeichen: mehrere Leerzeichen (Unicode-Nummer 32), einen Tabulator (Unicode-Nummer 9) und die Zeichen für das Zeilenende (Unicode-Nummern 10 und 13). Nach dem Trimmen sind es nur 10 Zeichen. Darunter sind nur noch Whitespace-Zeichen, die zuvor nicht am Anfang oder am Ende gestanden haben.
Die Ausgabe sehen Sie in Abbildung 6.17.
Abbildung 6.17 Zeichenketten ändern
Bei den vorgestellten Änderungen bleibt die Original-Zeichenkette selbst unverändert. Falls Sie diese ändern möchten, müssen Sie die Anweisung z. B. wie folgt notieren:
tx = tx.toUpperCase();6.2.5 Reguläre Ausdrücke
Reguläre Ausdrücke (englisch: regular expressions) bieten weitere Möglichkeiten, Zeichenketten zu durchsuchen und gegebenenfalls zu verändern. Sie dienen zur Beschreibung von Suchmustern und werden in vielen Programmiersprachen eingesetzt. In JavaScript werden sie häufig zur Kontrolle von Benutzereingaben in Formularen benötigt. HTML5 (siehe Kapitel 17) bietet bei einer Reihe von Formularelementen das Attribut pattern. Dabei werden ebenfalls reguläre Ausdrücke zur Kontrolle verwendet.