Websiteentwicklung: JavaScript: Objekte: String

Aus Wikibooks

Wechseln zu: Navigation, Suche

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

WikiBookTitel JavaScript.jpg

Inhaltsverzeichnis


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

[Bearbeiten] Was eine Zeichenkette, ein String ist

„String“ nennen Programmierer eine Zeichenkette. In JavaScript ist String der Name für ein bestimmtes eingebautes Objekt. „Eingebaut“ 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 sind Textteile, man kann auch sagen: Zeichenketten bestehen aus beliebig zusammengesetzten Zeichenfolgen. Auch wenn die Bezeichnung als Kette nahelegt, daß ein String immer aus mehreren Zeichen bestehe, ist das nicht notwendig. Auch dies sind Strings:

  • ein einzelnes Schriftzeichen,
  • eine leere Zeichenkette.

Ein Script-Autor 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.

[Bearbeiten] Das Objekt String

[Bearbeiten] Konstanten / Eigenschaften

[Bearbeiten] Länge - length

[Bearbeiten] Funktionen / Methoden

[Bearbeiten] Teile einer Zeichenkette ermitteln / erkennen

[Bearbeiten] Zeichen an Position - charAt()

Man kann sagen, ein String ist ein Array einzelner Zeichen, vereinfacht ausgedrückt, eine Liste einzelner Buchstaben. Mit der Methode charAt() können diese einzelnen Zeichen 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 Zeichen.

Die Indexzählung beginnt 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.

<html>
<head>
  <title>JavaScript : Objekt String : charAt()</title>
  <meta http-equiv=content-type content="text/html; charset=ISO-8859-1">
 
  <script type="text/javascript" language="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><tt>String.charAt()</tt></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>

Programm testen

[Bearbeiten] Zeichen-Code an Position - charCodeAt()
[Bearbeiten] Teilstring mit bestimmter Länge - substr()
[Bearbeiten] Teilstring von .. bis .. - substring() oder slice()
[Bearbeiten] 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.

Ausgeführte Beispielanwendung für die Methode split()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Demonstration der Methode 'split()'</title>
 
  <meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
 
  <script language="JavaScript1.1" type="text/javascript" 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>Mit split() eine zusammengesetzte, mehrteilige Angabe zerlegen</h1>
 
  <noscript>
      <font size="+1" color="#800000"><b><u>Achtung:</u> Diese Seite 
      demonstriert eine JavaScript-Funktion. Ihr Browser stellt 
      JavaScript nicht dar, daher k&amp;ouml;nnen Sie diese Seite nicht 
      wie vorgesehen nutzen, ohne dies zu &amp;auml;ndern.</b></font>
  </noscript>
 
  <p>Für dieses Beispiel geben Sie einen Bürgerlichen Namen ein.
  Das Script versucht, Ihre Eingabe in Vor- und Nachnamen zu
  zerlegen.</p>
 
  <h2>Folgende Eingabeformen sind zulä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>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>Ausgabe</h2>
  <table>
    <tr>
      <th align="right"><strong>Vorname(n): </strong></th>
      <td><input type="text" name="vorname" size="75"></td>
    </tr>
    <tr>
      <th align="right"><strong>Nachname: </strong></th>
      <td><input type="text" name="nachname" size="75"></td>
    </tr>
  </table>
  </form>
</body>
</html>

Programm testen

[Bearbeiten] Zeichenposition suchen - indexOf(), lastIndexOf()
[Bearbeiten] Zeichenfolgen suchen + zurückgeben - match()
[Bearbeiten] Zeichenfolgen suchen + Positionen zurückgeben - search()

[Bearbeiten] Zeichen austauschen, manipulieren und verketten

[Bearbeiten] Verketten - concat()
[Bearbeiten] Ersetzen - replace()
[Bearbeiten] Großschrift - toUpperCase()
[Bearbeiten] Kleinschrift - toLowerCase()

[Bearbeiten] 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>...
 
[Bearbeiten] 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.


[Bearbeiten] Die Funktion blink()

Der 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


[Bearbeiten] 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




[Bearbeiten] Aufgaben + Lösungen

[Bearbeiten] Weblinks

[Bearbeiten] Übersichten zum String-Objekt


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


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

Von „http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Objekte:_String“
Persönliche Werkzeuge