CSS, HTML und Javascript mit {stil}

Javascript Strings: replace, search, match, trim & more

String-Funktionen: replace, search, match

Javascript bietet Suchen und Ersetzen von Zeichen in Strings und kann Strings teilen oder splitten. Mit replace() extrahiert Javascript Zeichenketten aus Strings und charAt() bestimmt die Position von Zeichen innerhalb eines Strings.

Die hohe Kunst der Stringverarbeitung ist das Filtern von Zeichenketten: Ist diese Zeichenfolge eine richtige Emailadresse?

Erst bei komplexen Such- und Ersetzungsfunktionen sind reguläre Ausdrücke erforderlich.

Zum besseren Verständnis der String-Methoden hilft es, sich den String als ein besonderes Array vorzustellen:

                                     1 1 1 1 1 1 1 1 1 1 2 2 2 2 2
Index-Position   0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 
Zeichen          I c h   b i n   e i n e   Z e i c h e n k e t t e

Javascript charAt()

Zeichen an der eingegebenen Position – gezählt ab 0.

         // 0123456789012345678901234
var elem = "Ich bin eine Zeichenkette";
alert(elem.charAt(5));                                   // Ausgabe: i

Javascript charCodeAt(z)

Unicode-Codewert an der Position z.

         // 012345678901234567890
var elem = "Ich bin der Schlüssel";
alert(elem.charAt(16) +  " " + elem.charCodeAt(16));     // Ausgabe: 252

Jedes Zeichen hat eine bestimmte Position in der Unicode-Codetabelle.

alert(charAt(16) + " " + elem.charCodeAt(16)); gibt das Zeichen und im Anschuss daran den Codewert des Zeichens aus.

Javascript concat()

Javascript concat(str) hängt eine Zeichenkette an die Zeichenkette str.

var vorname = "Egon";
var name = vorname.concat(" Meier");

alert(name);  // Ausgabe: Egon Meier

Javascript fromCharCode()

Javascript fromCharCode(c1,c2,..) erzeugt eine Zeichenkette aus Unicode-Werten ci.

var simpleString = String.fromCharCode(69, 103, 111, 110);

alert(simpleString); // Ausgabe: Egon

Javascript indexOf()

Javascript indexOf() ermittelt die erste Position einer Zeichenkette innerhalb einer Zeichenkette. Liefert -1, wenn die Zeichenkette nicht gefunden wird.

                 // 0123456789012345678901234
var simpleString = "Ich bin eine Zeichenkette";

alert(simpleString.indexOf('eine'));               // gibt 8 aus

Javascript lastIndexOf()

Javascript lastIndexOf(str) findet die letzte Position einer Zeichenkette str. Liefert -1, wenn die Zeichenkette str nicht gefunden wird.

                 // 0123456789012345678901234567890123456
var simpleString = "http://www.wisotop.de/jsStrings.shtml";
alert(simpleString.lastIndexOf('/'));              // Ausgabe: 21

Javascript match()

Javascript match(str) durchsucht eine Zeichenkette nach der Zeichenkette str.

var simpleString = "Paulus der Apostel. Paul in Napoleons Paulinengärtchen";

if (simpleString.match('Paul')) {
…
}

Die Suche nach einem einfachen String gibt den ersten Treffer zurück, falls das Suchmuster gefunden wird, und null sonst.

Wenn alle Vorkommen von »Paul« oder »Paul« unabhängig von Groß- und Kleinschreibung gefunden werden sollen, kann Javascript match() mit einem regulären Ausdruck aufgerufen werden.

Javascript replace()

Javascript replace(a,b) sucht Text a in einem String und ersetzt ihn durch Text b.

var simpleString = "Paul Pauline Apostel Paulus Paulinengärtchen Paul Paulatius";
var newString = simpleString.replace('Paul','Martha');
alert(newString);

Suchen und Ersetzen mit Javascript replace(a,b) und einem einfachen String a ersetzt das erste Vorkommen des Suchstrings durch b.

Wenn alle Vorkommen der Zeichenkette a durch b ersetzt werden sollen oder Groß- und Kleinschreibung eine Rolle spielen, kann Javascript replace() mit einem regulären Ausdruck aufgerufen werden.

search

Javascript search(str) sucht die Position der Zeichenkette str und gibt 1 zurück, wenn str gefunden wird, und -1 sonst.

Da es bei einem einfachen String keine Möglichkeit gibt, die Suche unabhängig von Klein-/Großschreibung durchzuführen, findet search() die Zeichenfolge erst an Position 28.

Anstelle eines einfachen Strings kann Javascript search() (genauso wie match() und replace()) mit einem regulären Ausdruck aufgerufen werden. Dann kann die Suche im Text Groß- und Kleinschreibung unterscheiden und alle Treffer aus einem Text ziehen.

slice

Javascript slice(v,b) extrahiert einen Teil aus einer Zeichenkette. Im Argument stehen v = von (inklusive) und b = bis(exklusive).

                    0123456789012345678901234567890123456
var simpleString = "Paul Pauline Apostel Paulus Postpaket";
var ausschnitt = simpleString.slice(13, 20);
alert(ausschnitt);                      // gibt Apostel aus

simpleString.slice(13, 20) schneidet die Zeichenfolge beginnend bei Position 13 bis inklusive Position 19 aus und weist die Zeichenfolge der Variablen ausschnitt zu.

String zu Array: split

Javascript split teilt eine Zeichenkette bei jedem Vorkommen des Teilstrings oder regulären Ausdrucks a und speichert die Fragmente in einem Array. Der optionale Parameter n gibt die maximale Anzahl von Feldern an, die von der Methode erzeugt werden sollen.

var simpleString = "Paul, Pauline, Apostel, Paulus, Postpaket";
var felder = simpleString.split(',', 3);
var text = "";
for (var i=0; i<felder.length; i++) {
	text +=  felder[i] + "\n";
}
alert(text);

// gibt aus
// Paul
//  Pauline
//  Apostel

simpleString.split(',') splittet den String anhand des »,«-Zeichens auf und speichert die ersten drei Fragmente in jeweils einem Feld des Arrays felder. Die for-Anweisung durchläuft alle Felder des Arrays und schreibt die Werte in einen Textstring für die Ausgabe.

substr

Javascript substr(v,z) ermittelt ein Fragment Zeichenkette ab Position v (inklusive) mit einer Länge von z Zeichen.

                    0123456789012345678901
var simpleString = "http://www.wisotop.de/";
var fragment = simpleString.substr(11, 7);
	
alert(fragment);                         // gibt wisotop aus

var fragment = simpleString.substr(11, simpleString.length); erzeugt ein Fragment des Strings simpleString ab Position 11 mit einer Länge von 7 Zeichen.

substring

schneidet ein Fragment ab Position v (inklusive) bis zur Position b (exklusive) aus einem String.

var simpleString = "http://www.wisotop.de/";
var fragment = simpleString.substring(11, 18);
	
alert(fragment);                        // gibt wisotop aus

var fragment = simpleString.substring(11, 18); schneidet ein Fragment ab Position 11 bis Position 18 aus der Zeichenfolge simpleString.

trim

Javascript trim() entfernt Leerzeichen, also Blanks oder Whitespace, am Anfang und am Ende eines Strings. Gut z.B., um einen String in ein Array umzuwandeln oder für Daten aus einem Eingabefeld.

Ab IE9

		
 	 	Am Brunnen vor dem   Tore             
<pre id="trimMe">		
 	 	Am Brunnen vor dem   Tore             
</pre>
…
trimMe.innerHTML = trimMe.innerHTML.trim();

String-Konstruktor

Strings können nicht nur durch die Zuweisung eines String-Literals an einen Variablennamen definiert werden, sondern auch durch den String-Konstruktor.

var objectString = new String('Hallo Welt!');   // String-Konstruktor
var objectString = new String('');              // String-Konstruktor

Allerdings ist die literale Notation der Normalfall und der String-Konstruktor bleib eher besonderen Anwendungen vorbehalten.

String ist der Prototyp für Zeichenketten und wickelt sich um den primitiven Datentyp string. Wrapper sind Objekte, die denselben Namen haben wie der Datentyp, den sie darstellen. Für jeden primitiven Datentyp – string, number und boolean – gibt es ein String-Objekt, ein Number-Objekt bzw. ein Boolean-Objekt. Wrapper stellen die Eigenschaften und Methoden, die für das Objekt definiert sind, dem primitiven Datentyp zur Verfügung und so können primitive Strings als Objekte behandelt werden.

var simpleString = 'Hallo Welt!';                // Literale Notation
var objectString = new String('Hallo Welt!');    // String-Konstruktor

Alle Methoden des String-Objekts (z.B. String.length) können mit dem literalen Wert benutzt werden, weil JavaScript automatisch den literalen String in ein temporäres String-Objekt umwandelt, die Methode aufruft und dann das temporäre String-Objekt löscht.

Die erste Methode ist sicherlich der Normalfall, während die zweite Methode eher selten benutzt wird. Sie wird eingesetzt, wenn sicher gestellt werden soll, dass tatsächlich ein String erstellt wird oder wenn das String-Objekt durch eigene Methoden erweitert werden soll.

Alle Methoden des String-Objekts können auch auch das String-Literal angewendet werden, da Javascript ein String-Literal automatisch in ein String-Objekt umwandelt, wenn eine Methode aufgerufen wird.

String-Funktionen zur Textformatierung

Die Methoden zur Formatierung von Text wie blink, big, bold, fixed, fontsize stammen aus grauen Vorzeiten und werden in HTML5 nicht mehr unterstützt.