Websiteentwicklung: JavaScript: Objekte: String

<< das Math-Objekt | Inhaltsverzeichnis | Index | Arrays >>

Das String-Objekt stellt vielfältige Methoden zur Bearbeitung von Zeichenketten zur Verfügung.

Der String: Eine Zeichenkette für Software-Entwickler

Software-Entwickler bezeichnen eine Zeichenkette üblicher Weise als String. In JavaScript ist String der Name für ein eingebautes Objekt. Das bedeutet für uns:

Das String-Objekt muß man nicht extra definieren, um es in einem Script verwenden zu können; sondern das String-Objekt mit allen seinen Eigenschaften und Methoden stellt JavaScript von vornherein fertig zur Verfügung.

Zeichenketten kann man als Bestandteile von Texten betrachten, man könnte auch sagen: Zeichenketten bestehen aus beliebig zusammengesetzten Folgen von Zeichen, dass ein String ein Array einzelner Zeichen oder vereinfacht ausgedrückt, eine Liste einzelner Zeichen ist (wer Interesse hat, kann dies mit dem Umgang von Strings in der Programmiersprache C vergleichen). Auch wenn die Bezeichnung als Kette oder Liste nahelegt, dass ein String immer aus mehreren Zeichen besteht, ist das nicht notwendig. Auch:

ein einzelnes Schriftzeichen oder
eine leere Zeichenkette

sind Strings. Ein Entwickler behandelt Inhalte als Zeichenkette, wenn er sie speichern oder ihren Inhalt der Form nach untersuchen möchte; aber eher keine mathematischen Methoden auf sie anwenden möchte. Beispielsweise würde man im Alltag sagen, eine Postleitzahl sei eine Zahl; aber ein erfahrener Programmierer würde eine Postleitzahl eher nicht als Zahl kodieren; sondern als String behandeln, weil er in den allermeisten Fällen nicht vorhat, die Postleitzahl mathematisch zu behandeln, mit ihr zu rechnen.

Hinweis: Programmierer definieren Variablen für Werte, mit denen sie nicht rechnen möchten, d. h. solche Variablen, auf deren Inhalte sie keine mathematischen Methoden der verwendeten Programmiersprache anzuwenden beabsichtigen, normalerweise als String.

Wikipedia hat einen Artikel zum Thema:

Strings

Das Objekt `String`

Konstanten / Eigenschaften

Das String-Objekt besitzt die Eigenschaften:

constructor,
length und
prototype.

An dieser Stelle soll nur die Eigenschaft length hervorgehoben werden. Sie gibt, wie bereits in den Beispielen zuvor beschrieben, die Länge eines Strings, also die Anzahl der Zeichen, aus. So ist z.B. der Wert der Variablen n im nachfolgenden Beispiel 11.

var str = "Hallo Welt!";
var n = str.length;

Funktionen / Methoden

Teile einer Zeichenkette ermitteln / erkennen

Zeichen an Position - charAt()

Mit der Methode charAt() können die einzelnen Zeichen eines Strings einzeln gelesen werden. Dazu übergibt man als Aufrufparameter an charAt() den Index des gewünschten Zeichens, d.h. die Zahl für die Position des Zeichens innerhalb des zu behandelnden Strings; charAt() liefert daraufhin das jeweilige Zeichen zurück.

Wie bei den Arrays üblich, beginnt der Index von Strings mit 0 (der Zahl Null), d.h.

"EUR".charAt(0) gibt den String E zurück;
"EUR".charAt(2) liefert den String R.

Somit hat das letzte Zeichen eines Strings cText immer den Index cText.length-1. Im nachfolgenden Beispiel wird ein Formular mit einem Textfeld angezeigt, sobald der Formular-Button gedrückt wird, wird ein neues Fenster geöffnet und der Textinhalt aus dem Text zeichenweise ausgelesen und dann vertikal auf der neuen Seite dargestellt.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript : Objekt String : charAt()</title>
  <meta charset="utf-8">
 
  <script type="text/javascript">
    function getVerticalString(cInput)  {
      var cOutput = new String("");
      if (cInput!=undefined && cInput!="")  {
        for (var i=0; i<cInput.length; i++) {
            cOutput += "  " + cInput.charAt(i) + "<br>\n";
        }
        cOutput = cOutput.substring( 0, cOutput.length-5 );
      }
      cOutput = "<div align=center>\n  <b>\n" +
                cOutput + "\n  <\/b>\n<\/div>";
      return cOutput;
    }
 
    function writeAnswerPage(cInput)  {
      outpWin = window.open();
      outpWin.document.write( getVerticalString(cInput) );
      outpWin.document.close();
      outpWin.focus(); 
      document.forms[0].reset();
      return false;
    }
  </script>

</head>
<body>
  <h1 style="font-family:monospace">String.charAt()</h1>
  <p>Diese Seite demonstriert, die Methode <code>charAt()</code>.</p>
  <form>
    <p><b>Schreiben Sie ein paar Worte:</b>
    <input type="text" size="30" onBlur="writeAnswerPage(this.value)">
    <input type=submit value="Antwortseite erstellen!"></p>
  </form>
</body>
</html>

Zeichen-Code an Position - charCodeAt()

Gibt die Unicode-Darstellung des Zeichens an der gewählten Position zurück. Im nachfolgenden Beispiel wird die Unicode-Darstellung des letzten Zeichens ausgegeben, das Resultat ist in diesem Fall 33.

var str = "Hallo, Welt!";
var n = str.charCodeAt(str.length-1); // die erste Position von Strings ist 0, daher muss noch 1 von length abgezogen werden, um das letzte Zeichen zu lesen

Teilstring mit bestimmter Länge - substr()

Diese Funktion extrahiert aus einem String einen Teilstring mit einer bestimmten Länge. Wenn der zweite Parameter fehlt, wird bis zum Ende der Zeichenkette extrahiert.

var test = "Rudi Ruessel, Ruesselsheim";
var Rudi = test.substr(0,4));          // Gibt die ersten vier Buchstaben zurück
var Ruessel = test.substr(5,7));       // Gibt sieben Buchstaben ab der Position 5 zurück
var Ruesselsheim = test.substr(14);    // Gibt alle Buchstaben ab Position 14 zurück

Teilstring von .. bis .. - substring() oder slice()

Diese Funktionen extrahieren aus einem String einen Teilstring. Wenn der zweite Parameter fehlt, wird bis zum Ende der Zeichenkette extrahiert.

var test = "Rudi Ruessel, Ruesselsheim";
var Rudi = test.substring(0,4));          // Gibt die Buchstaben der Position 0 bis 3 zurück
var Ruessel = test.substring(5,12));      // Gibt die Buchstaben der Position 5 bis 11 zurück
var Ruesselsheim = test.slice(14);        // Gibt alle Buchstaben ab Position 14 zurück

In mehrere Teile zerlegen - split()

Mehrere Angaben wie ein Name, ein Vorname, eine Postleitzahl, ein Wohnort, eine Telefonnummer und eine E-Mail-Adresse werden oft zu einem Datensatz kombiniert. Solch ein Datensatz kann so aussehen:

"Rüssel","Rudi","65428","Rüsselsheim","06142-7654321","rudi.ruessel@elefantennetz-ruesselsheim.de"

Mit der Methode split() kann man beispielsweise solch einen Datensatz in seine Teilangaben zerlegen. Dabei wird ein Datensatz als eine Zeichenkette verstanden und verarbeitet und als Kodierer muss man split() nicht nur die zu trennende Zeichenkette nennen, sondern der Methode auch ein Zeichen oder eine Zeichenfolge übergeben, mit der die einzelnen Angaben im Datensatz voneinander getrennt sind. Beispielsweise kann die Eigenschaft userAgent des JavaScript-Objekts navigator folgenden Abschnitt enthalten:

compatible; Konqueror/3.1-rc6; i686 Linux; 20021119

Möchte man diese zusammengesetzte, mehrteilige Angabe mit split() zerlegen, so gibt man beim Aufruf von split() als Trennzeichen den Strichpunkt an:

    //Das Semicolon als Trennzeichen fuer die Funktion "split()".

  var dataset = "compatible; Konqueror/3.1-rc6; i686 Linux; 20021119"

  var elements = dataset.split(";")  // zerteile den String 'dataset'
                                     // bei jedem Strichpunkt

Ausgabe mit 'alert()': Konqueror/3.1-rc6

Die Variable elements wird dadurch zu einem Array. Arrays sind Variablenketten, in denen mehrere Werte gespeichert werden (siehe folgendes Kapitel). Dadurch kann jede Teilangabe über eine Indexzahl angesprochen werden. In Fortsetzung dieses Beispiels kann so beispielsweise der zweite Teil des Datensatzes ausgegeben werden mit
alert( elements[1] ). Die Zählung der Array-Elemente beginnt mit 0, daher hat das zweite Array-Feld den Index 1.

Beispielanwendung für die Methode split()

Das nachfolgende Beispiel versucht einen Namen, der in ein Textfeld eingegeben wird, in Vor- und Nachnamen zu zerlegen. Hierzu wird die split()-Methode genutzt.

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Demonstration der Methode 'split()'</title>
 
  <meta charset="utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript">
 
  <script type="text/javascript" language="JavaScript1.1" defer>
  <!--
      var names = new Array()
 
      function splitName(formName) {
          var inpt = formName.namenseingabe.value
          formName.vorname.value  = ""; formName.nachname.value = ""
          if (inpt.indexOf(",")!=-1) {
             while (inpt.indexOf(", ")!=-1)
             {
               inpt=inpt.replace(", ", "," )
             }
             names = inpt.split(",")
             formName.nachname.value=names[0]
             formName.vorname.value=names[1]
          } else {
             names = inpt.split(" ")
             for (var i=0; i<names.length; i++) {
                if (i<names.length-1) {
                    formName.vorname.value += names[i] + " "
                } else {
                    formName.nachname.value=names[i]
                }
             }
          }
       }
  //-->
  </script>
</head>
<body>
  <h1 style="font-size:26px">Mit split() eine zusammengesetzte, mehrteilige Angabe zerlegen</h1>
 
  <noscript>
      <span style="color:#800000; font-size:larger;"><b><u>Achtung:</u> Diese Seite
      demonstriert eine JavaScript-Funktion. Ihr Browser stellt
      JavaScript nicht dar, daher k&ouml;nnen Sie diese Seite nicht
      wie vorgesehen nutzen, ohne dies zu &auml;ndern.</b></span>
  </noscript>
 
  <p>F&uuml;r dieses Beispiel geben Sie einen B&uuml;gerlichen Namen ein.
  Das Script versucht, Ihre Eingabe in Vor- und Nachnamen zu
  zerlegen.</p>
 
  <h2 style="font-size:22px">Folgende Eingabeformen sind zul&auml;ssig</h2>
  <ul>
   <li>Vorname1 Vorname2 ... Nachname</li>
   <li>Nachname, Vorname1 Vorname2 ...</li>
  </ul>
 
  <hr>
 
  <form action="#" name="exampleForm"
   onSubmit="javascript:splitName(this);return false;">
  <h2 style="font-size:22px">Eingabe</h2>
  <p>
   <strong>Geben Sie Ihren kompletten Namen ein:</strong>
   <input type="text" name="namenseingabe" size="40"
    value="Vorname1 Vorname2 ... Nachname">
   <input type="submit" value="Eingabe mit split() zerlegen">
  </p>
 
  <hr>
 
  <h2 style="font-size:22px">Ausgabe</h2>
  <table>
    <tr>
      <th style="text-align:right"><strong>Vorname(n): </strong></th>
      <td><input type="text" name="vorname" size="75"></td>
    </tr>
    <tr>
      <th style="text-align:right"><strong>Nachname: </strong></th>
      <td><input type="text" name="nachname" size="75"></td>
    </tr>
  </table>
  </form>
</body>
</html>

Zeichenposition suchen - indexOf(), lastIndexOf()

Die beiden Methoden indexOf() und lastIndexOf() ermitteln die Position eines übergebenen Zeichens oder einer übergebenen Zeichenkette innerhalb einer Zeichenkette. indexOf() gibt hierbei die erste Position innerhalb der Zeichenkette und lastIndexOf() die letzte Position innerhalb der Zeichenkette zurück. Im nachfolgenden Beispiel gibt indexOf() daher den Wert 5 für die Variable l und den Wert 0 für die Variable n zurück, während lastIndexOf() in beiden Fällen den Wert 14 zurück gibt:

var str = "Rudi Ruessel, Ruesselsheim";

var l = str.indexOf("Ruessel"); 
var m = str.lastIndexOf("Ruessel"); 
var n = str.indexOf("R"); 
var o = str.lastIndexOf("R");

Zeichenfolgen suchen + zurückgeben - match()

Die Methode match() überprüft einen String auf das Vorkommen eines regulären Ausdrucks. Die Methode erwartet einen regulären Ausdruck als Parameter und liefert als Ergebnis eine oder mehrere Zeichenfolgen zurück, auf die der reguläre Ausdruck passt. In Abhängigkeit des regulären Ausdrucks kann es sein, dass der gesuchte Ausdruck mehrfach gefunden wird, der Rückgabewert der Methode ist daher ein Array.

Im nachfolgenden Beispiel enthält result0 dreimal den Wert Mensch , result1 einmal den Wert Mensch und zweimal den Wert Menschen, result2 liefert keine Fundstelle und result3 den Wert Mensch genau einmal.

var str = "Der Mensch: Viele Menschen wissen, dass sie unglücklich sind. Aber noch mehr Menschen wissen nicht, dass sie glücklich sind.";
var result0 = str.match(/Mensch/g);
var result1 = str.match(/Menschen|Mensch/g);
var result2 = str.match(/mensch/g);
var result3 = str.match(/mensch/g);

Reguläre Ausdrücke sollen an dieser Stelle nicht detailliert erläutert werden eine gute Übersicht findet sich aber hier und hier.

Zeichenfolgen suchen + Positionen zurückgeben - search()

Zeichen austauschen, manipulieren und verketten

Verketten - concat()

Mit der Methode concat() können Strings zusammengefügt werden.

Ein kleines Beispiel:

var firstname = "Peter";
var lastname = "Tester";

var name = lastname.concat(firstname);
alert(name); //TesterPeter

Mit concat ist es auch möglich mehr als zwei Strings zu verketten.

var firstname = "Peter";
var lastname = "Tester";
var space = " ";
	
var name = lastname.concat(space).concat(firstname);
alert(name); //Tester Peter

Ersetzen - replace()

Mit der replace-Methode können Zeichenketten in einem String durch einen anderen String ersetzt werden.
Das erste Attribut der Methode ist ein regulärer Ausdruck, nach welchem in dem String gesucht wird. Wenn Sie mehr über reguläre Ausdrücke erfahren wollen, lesen Sie das nächste Kapitel.
Das zweite Attribut enthält den String, durch den die gefundenen Strings ersetzt werden sollen.

Beispiel

var hallo = "hallo hallo hallo hallo";
var test = hallo.replace(/hallo/g, "test"); // test test test test

Großschrift - toUpperCase()

Die Methode toUpperCase() ändert alle Kleinbuchstaben eines Strings zu Großbuchstaben.

Ein kleines Beispiel:

var test = "TeSt";
alert(test); //TeSt
alert(test.toUpperCase()); //TEST

Kleinschrift - toLowerCase()

Die Methode toLowerCase() ändert alle Großbuchstaben eines Strings zu Kleinbuchstaben.

Ein kleines Beispiel:

var test = "TeSt";
alert(test); //TeSt
alert(test.toLowerCase()); //test

Zeichenketten mit HTML auszeichnen

Das Object String bietet eine ganze Anzahl von Methoden, die einen Text mit HTML-Tags auszeichnen und dadurch eine bestimmte Darstellung des Textes in Web-Browsern einfordern.

anchor()
fixed()
link()
sup()

big()
fontcolor()
small()

blink()
fontsize()
strike()

bold()
italics()
sub()

Die eben aufgelisteten Methoden des Objects String versehen die jeweils von ihnen behandelte Zeichenkette mit HTML-Code, und zwar derart, daß jede dieser Methoden einen bestimmten HTML-Tag erzeugt:

JavaScript-Methode	HTML-Tag
`anchor()`	`<a name=...>...`
`blink()`	`<blink>...`
`fixed()`	`<tt>...`
`fontsize()`	`<font size=...>...`
`link()`	`<a href=...>...`
`strike()`	`<strike>...`
`sup()`	`<sup>...`

JavaScript-Methode	HTML-Tag
`big()`	`<big>...`
`bold()`	`<b>...`
`fontcolor()`	`<font color=...>...`
`italics()`	`<i>...`
`small()`	`<small>...`
`sub()`	`<sub>...`

Nutzungseinschränkungen / Browserinkompatibilitäten

Über den Nutzen dieser JavaScript-Methoden zur HTML-Auszeichnung von Zeichenketten kann man verschiedener Ansicht sein; da der Gegenstand dieses Wikibooks jedoch nicht die Diskussion von W3C-Empfehlungen oder von Ansichten ist, sondern die Vorstellung der Möglichkeiten von JavaScript-Programmierung, sei darauf verzichtet, dies hier zu erörtern. Merken sollte man sich jedenfalls:

Die folgenden Methoden gehören nicht zur Norm ECMA-262, auch wenn sie von aktuellen Web-Browsern (bspw. Internet Explorer 6, Firefox 1.5.0.8, Opera 9) verstanden werden.

Es ist also – zumindest theoretisch – möglich, daß diese Funktionen von Web-Browsern, welche sich streng an den ECMA-Standard halten, nicht verstanden werden.

Die Funktion `blink()`

Der von Netscape eingeführte HTML-Tag <blink>...</blink> ist nie in einen HTML-Standard aufgenommen worden. Zwar erzeugen die meisten Web-Browser einen solchen HTML-Tag, wenn man die Funktion blink() einsetzt, aber der von diesem HTML-Tag umfasste Text wird oft trotzdem nicht blinkend dargestellt.

Browser	zeigt Blinken an
Internet Explorer	nie
Netscape-Browser	seit der Version 4 Build 2. Alle Abkömmlinge des Netscape-Browsers zeigen das Blinken an, dies gilt also beispielsweise auch für neuere Browser wie Firefox 1.5ff.
Opera-Browser	seit der Version 7.2

Wirkung und Anwendung

Ebenso wenig wie die oben angeführte Zuordnung von JavaScript-Funktionen zu HTML-Tags für jemanden, der HTML kennt, eine Überraschung ist, ist es die Wirkungsabsicht dieser Methoden. Die Methoden lassen sich nach ihrer Wirkung und damit ihrer Einsatzmöglichkeit wie folgt aufteilen:

**Veränderung des Schriftschnitts**
Methode	Wirkung
`bold()`	Fettschrift
`fixed()`	Schrift mit gleichbreiten Buchstaben
`italics()`	schräggestellte (quasi-kursive) Schrift

**Veränderung der Schriftgröße**
Methode	Wirkung
`big()`	Schrift um eine Stufe vergrößern
`fontsize()`	Dem Text einen der 7 HTML-Schriftgrade zuweisen (1=kleinste, 7=größte)
`small()`	Die Schrift um eine Stufe verkleinern

**Höher bzw. tiefer stellen**
Methode	Wirkung
`sub()`	einen Text bzw. ein Zeichen tieferstellen
`sup()`	einen Text bzw. ein Zeichen höherstellen

**Spezialdarstellungen**
Methode	Wirkung
`blink()`	Text blinken lassen
`fontcolor()`	Text in einer bestimmten Farbe anzeigen (Farbnamen oder hexadezimale Farbcodes, also bspw. "blue" oder "#0000FF")
`strike()`	Den Text durchgestrichen anzeigen

**Hypertextfunktionen**
Methode	Wirkung
`anchor()`	ein Sprungziel erzeugen
`link()`	einen Verweis erzeugen

Aufgaben + Lösungen

Weblinks

Übersichten zum String-Objekt

SelfHtml: JavaScript - Objektreferenz - String
HTMLWorld: JavaScript - Objekt: String – Die Seite listet alle Funktionen des String-Objekts kurz und knapp auf.

Erläuterungen und Beispiele zu einzelnen Methoden des String-Objektes

Dr.Web: Strings zerschneiden leicht gemacht – Demonstriert die Methode substr().

Dr.Web: Zahlen formatieren mit System – Demonstriert die Methode substring().

Dr.Web: Search and Replace – Programmierbeispiel zu Suchen / Ersetzen

<< das Math-Objekt | Inhaltsverzeichnis | Index | Arrays >>

Der String: Eine Zeichenkette für Software-Entwickler

Das Objekt String

Konstanten / Eigenschaften

Funktionen / Methoden

Teile einer Zeichenkette ermitteln / erkennen

Zeichen an Position - charAt()

Zeichen-Code an Position - charCodeAt()

Teilstring mit bestimmter Länge - substr()

Teilstring von .. bis .. - substring() oder slice()

In mehrere Teile zerlegen - split()

Zeichenposition suchen - indexOf(), lastIndexOf()

Zeichenfolgen suchen + zurückgeben - match()

Zeichenfolgen suchen + Positionen zurückgeben - search()

Zeichen austauschen, manipulieren und verketten

Verketten - concat()

Ersetzen - replace()

Großschrift - toUpperCase()

Kleinschrift - toLowerCase()

Zeichenketten mit HTML auszeichnen

Nutzungseinschränkungen / Browserinkompatibilitäten

Die Funktion blink()

Wirkung und Anwendung

Aufgaben + Lösungen

Weblinks

Übersichten zum String-Objekt

Erläuterungen und Beispiele zu einzelnen Methoden des String-Objektes

Das Objekt `String`

Die Funktion `blink()`