Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Arbeiten mit Zeichenkette


Operationen mit Zeichenketten
Die Funktion charAt
Die Funktion charCodeAt
Die Funktion fromCharCode()
Die Funktion indexOf()
Die Funktion lastIndexOf()
Die Funktion slice()
Die Funktion split()
Die Funktionen substr() und substring()
Die Funktion toString()

Operationen mit Zeichenketten

Wer Operationen mit Zeichenketten durchführen will, wird wohl bei komplexeren Problemen auf regular expressions (Regular Expressions und deren praktische Anwendung) zurückgreifen. JavaScript stellt aber auch selber Funktionen zum bearbeiten von Zeichenketten zur Verfügung. Eine Zeichenkette ist in JavaScript immer ein Objekt der Klasse String und zwar unabhängig davon, ob man das Objekt nun explizit instanziiert oder nicht.

<html><head><title>test</title></head>
<body>
<script language="JavaScript">
banane=new String("Obstsalat");
banane2="Obstsalat";
alert(banane.length+" "+banane2.length);
</script>
<body>
hallo
</body>
</html>

In beiden Varianten ist length eine Eigenschaft eines String Objektes. Der Wert dieser Eigenschaft ist 9, weil Obstsalat nun mal 9 Buchstaben hat. Wer es nicht glaub, kann hier clicken.

Die Funktion charAt

Die Funktion charCodeAt liefert das Zeichen an einer bestimmten Stelle innerhalb eines Strings, also z.B. das 5 Zeichen in Obstsalat wäre a ( bei 0 wird gestartet). Die Funktion ist wohl nicht besonders praxisrelevant, weil man sie ja nur anwenden kann, wenn man die Struktur der zu durchsuchenden Zeichenketten kennt, das dürfte aber sehr selten der Fall sein. Wie dem auch sei, hier ein Beispiel.

<html><head><title>test</title></head>
<body>
<script language="JavaScript">
banane3="Obstsalat";
alert(banane3.charAt(4));
</script>
<body>
hallo
</body>
</html>

Dieser Miniskript produziert dann so was.

Die Funktion charCodeAt

Die Funktion charCodeAt() liefert den Iso-Latin1-Code zu einem bestimmten Buchstaben, der Iso-Latin1-Code von ä ist zum Beispiel 228. Wahrscheinlich gehört auch diese Funktion nicht gerade zu den Funktionen, die man unbedingt kennen muss. Die Funktionsweise zeigt dieser kleine Skript.

<script language="javascript">
banane4="Obstsälat";
function laenge_zeigen3()
{
alert(banane4.charCodeAt(5));
}
</script>

Dieser Miniskript produziert dann so was.

Die Funktion fromCharCode()

Die Funktion formCharCode() macht genau das Gegenteil wie die Funktion charCodeAt(). Sie liefert zu einem Iso-Latin1-Code den dazugehörigen Buchstaben. Übergibt man z.B. 228 erhält man als Ergebnis ä, wie dieses kleine Programm zeigt.

<script language="javascript">
function laenge_zeigen4()
{
alert(String.fromCharCode(228));
}
</script>

Dieser Miniskript produziert dann so was. Gewöhnungsbedürftig ist die Tatsache, dass hier direkt mit der Klasse String gearbeitet wird und nicht mit einer Instanz derselben.

Die Funktion indexOf()

Die Funktion lastIndexOf erhält als Parameter ein Wort. Sie ermittelt dann ob dieses Wort in dem String Objekt enthalten ist und liefert als Wert die Position, wo es enthalten ist, bzw. den Startpunkt. Hat man z.B. Pfannkuchen und übergibt kuchen erhält man 5. (Der Anfangsbuchstabe von kuchen befindet sich an 5 Position P-f-a-n-n-k, denn die Zählung beginnt bei 0). Die Funktion ist case sensitive, das heisst, Kuchen ist nicht enthalten. Gibt man Kuchen ein, erhält man -1, ein Indiz dafür, dass die gesuchte Zeichenkette nicht enthalten ist.

<script language="javascript">
banane="Pfannkuchen";
function laenge_zeigen5()
{
alert(banane.indexOf("kuchen"));
}
</script>

Dieser Miniskript produziert dann so was.

Die Funktion lastIndexOf()

lastIndexOf() macht das gleiche wie indexOf, allerdings wird die Zeilenkette von hinten startend gesucht. Allerdings ist hierbei eine Fallunterscheidung zu machen. Wir zeigen erstmal den einfacheren Fall. Dieser Miniskript produziert dann so was. Wir erhalten wieder 5, das heisst, wir sehen überhaupt keinen Unterschied und tatsächlich ist in diesem Fall auch keiner vorhanden. Eine Unterschied ergibt sich nur, wenn das gesuchte Wort mehrere male in der Zeichenkette enthalten ist.

Betrachten wir diese beiden Beispiele

<script language="javascript">
banane="Pfannkuchen ist ein kuchen, den man in der Pfanne macht";
function laenge_zeigen7()
{
alert(banane.indexOf("kuchen"));
}
function laenge_zeigen8()
{
alert(banane.lastIndexOf("kuchen"));
}
</script>

Die Funktion indexOf() liefert das und die Funktion lastIndexOf() liefert das. Nun sehen wir einen Unterschied. lastIndexOf() liefert uns 5, das erste Vorkommnis von kuchen in der Zeichenkette. lastIndexOf() liefert uns allerdings 20, das letzte Vorkommnis von kuchen in der Zeichenkette. indexOf beginnt also mit der Suche am Anfang, lastIndexOf am Ende. Die Funktion lastIndexOf() hat noch einen zweiten, fakultativen Parameter. Über diesen lässt sich bestimmen, wo, vom Beginn der Zeichenkette her betrachtet, die Suche beginnen soll.

<script language="javascript">
banane="Pfannkuchen ist ein kuchen, den man in der Pfanne macht. Ein Pfannkuchen ist also kein Berliner, auch wenn die Berliner das meinen";
function laenge_zeigen9()
{
alert(banane.lastIndexOf("kuchen",30));
}
</script>

Was erhalten wir ? Wir erhalten 20. Warum ? Durch die Angabe des zweiten Parameters schneiden wir das Fragment "Pfannkuchen ist ein kuchen, den" raus. In diesem verbleibenden Teilstück wird von hinten angefangen nach dem ersten Vorkommnis des Zeichens gesucht. Von hinten gesehen befindet sich das erste Vorkommnis von kuchen an 20 Position. Man kann auch hier clicken, dann sieht man was passiert.

Die Funktion slice()

Mit der Funktion slice() kann man aus einem einer Zeichenkette ein Stück ausschneiden. Die Funktion hat zwei Parameter, der Punkt, ab dem herausgeschnitten werden soll und der Punkt, bis zu dem herausgeschnitten werden soll. Ausschneiden ist hierbei nicht so zu verstehen, dass herausgeschnittene Stück nicht mehr Bestandteil ist der ursprünglichen Zeichenkette.

<script language="javascript">
banane="Pfannkuchen ist ein kuchen, den man in der Pfanne macht. Ein Pfannkuchen ist also kein Berliner, auch wenn die Berliner das meinen";
function rausschneiden()
{
alert("Rausgeschnittenes Stück: "+banane.slice(27,55)+"\nOrginal:"+banane);
}
</script>

Clickt man hier drauf, sieht man was die Funktion macht.

Die Funktion split()

Mit der Funktion split() kann man eine Zeichenkette, anhand beliebiger Wörter spalten. Die sich dann ergebenden Einzelteile werden in einen Array übergeben. Was diese Funktion macht, kann man betrachten, wenn man hier clickt.

<script language="javascript">
kirsche=new Array();
banane="Yoghurt||Quark||Sahne||Kefir";
function aufspalten()
{
kirsche=banane.split("||");

for(i=0;i<kirsche.length-1;i++)
{
alert(kirsche[i]);
}

}
</script>

Die Funktionen substr() und substring()

Die Funktionen substr() und substring() machen im Prinzip das gleiche, lediglich die Bedeutung der übergebenen Parameter ist unterschiedlich.

substr(Positition ab der rausgeschnitten wird, wieviele Zeichen rausgeschnitten werden sollen)
substring(Position ab der rausgeschnitten wird, bis wohin rausgeschnitten werden soll)
Beispiel

<script language="javascript">
function rausschneiden()
{
banane="Sein Auge weilt auf dieser Erde kaum, sein Ohr vernimmt den Einklang der Natur";
schnitte1=banane.substr(10,10);
schnitte2=banane.substring(10,15);
alert ("Mit der Funktion substr(): "+ schnitte1 + "\nMit der Funktion substring(): "+schnitte2);
}
</script>

Wenn man hier clickt, sieht man das Ergebnis. Was der Skript dann macht ist eigentlich selbserklärend.

Die Funktion toString()

Es kann Situationen geben, wo der Typ einer Variablen von Typ number ist, man auf diese Zahl aber einer Methode der Klasse String anwenden möchten. In dieser Situation muss die Zeichenkette zu einer Variablen vom Typ string umgewandelt werden.

<script language="javascript">
function konvertieren()
{
banane=40;
alert(typeof(banane));
banane=banane.toString();
alert(typeof(banane));
}
</script>

Man kann hier clicken, um zu sehen, was der Skript macht. Zuerst initialisieren wir eine Variable und weisen dieser den Wert 40 zu (banane=40). Da 40 eine Zahl ist, geht JavaScript davon aus, dass wir eine Variable vom Typ number initialisieren wollen und folglich ist banane erstmal vom Typ number. Anschliessend konvertieren wir mit (banane=banane.toString())

vorhergehendes Kapitel