Teil von SELFHTML aktuell Teil von Artikel Teil von JavaScript

Typographische Korrekturen

nach unten Manuel Strehl
nach unten Hinweise zum Thema
nach unten Beispiel mit Erläuterungen
nach unten Weiterführende Links

Manuel Strehl

E-Mail: deutschsprachige Seite Kontaktformular
Homepage-URL: deutschsprachige Seite http://www.manuel-strehl.de

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

nach obennach unten

Hinweise zum Thema

Praktisch alle modernen Textverarbeitungsprogramme (wie Microsoft Word) haben eine Funktion, die automatisch das doppelte Hochkomma ("…") durch die typografisch korrekten Anführungszeichen (z.B. “…”) ersetzt. In Browsern ist etwas derartiges aus verschiedenen Gründen nicht eingebaut, deshalb liegt es an den Webautoren, die richtigen Zeichen zu verwenden.

Kurzer typografischer Einstieg

Im Deutschen verwendet man zu Beginn der wörtlichen Rede das Anführungszeichen unten (, in HTML „ oder „). Das Ende wird durch Anführungszeichen oben (, “ oder “) gekennzeichnet. Um das Ganze unübersichtlich zu machen, wird z.B. in englischsprachigen Texten das Anführungszeichen oben zum Anfang der Rede und ein gespiegeltes Anführungszeichen oben als Endmarke. Daneben gibt es noch die Klammern, »Guillemets« genannt, die bevorzugt in französischen Texten verwendet werden.

Übersicht über verschiedene Sprachen
Sprache Doppelte Anführungszeichen Einfache Anführungszeichen
Deutsch „…“ ‚…‘
Englisch “…” ‘…’
Französisch «…» ‹…›
Spanisch «…» ‹…›

Einen schönen Grundlagenartikel zum Thema gibt es bei deutschsprachige Seite crissov.de, SELFHTML erläutert die automatische Ergänzung korrekter Anführungszeichen mittels bereichsübergreifende Seite CSS-generiertem Inhalt.

Neben den Anführungszeichen in den verschiedenen Sprachen gibt es noch Sonderzeichen mit eigener Bedeutung, z.B. die Ellipse ( in HTML …, auch als „Punkt-Punkt-Punkt“ bekannt) sowie andere Ausdrücke, die von Textverarbeitungsprogrammen automatisch umgewandelt werden (z.B. Pfeile: --> wird zu ).

Viele dieser Symbole sind mit einer normalen Tastatur schwer einzugeben. Um trotzdem typografisch richtig zu schreiben und gleichzeitig die einfache Eingabe nicht aufzugeben, muss man weitere Methoden verwenden. Eine Möglichkeit stellt das hier besprochene Script dar. Es ersetzt, sobald die Seite geladen wurde, automatisch falsche Zeichen oder Abkürzungen durch die richtigen Symbole.

Finden der richtigen Stellen: Reguläre Ausdrücke

Um herauszufinden, welches Hochkomma in welches der verschiedenen Anführungszeichen übersetzt werden soll, verwenden wir bereichsübergreifende Seite Reguläre Ausdrücke. Mit diesen suchen wir spezielle Hinweise im Text, die uns zeigen, welche Zeichen die richtigen sind, z.B. Leerzeichen vor einem Wort oder Satzzeichen danach.

Betrachten wir folgenden Ausdruck:

/(^|\s|\(|\-)"([^"]*)"($|[\.,;:!?\/\)\-]|\s)/g

Der wichtigste Teil sind die rot markierten Anführungszeichen. Diese wollen wir ersetzen, aber nur, wenn sie weitere Bedingungen erfüllen, die in den grünen Klammern definiert werden. Zum ersten den Ausdruck dazwischen: Es dürfen beliebige Zeichen zwischen den beiden Hochkommata vorkommen, aber kein weiteres Hochkomma.

Dann schließen wir alles aus, was nicht vorne von einem Zeilenanfang (^), einem Weißraum-Zeichen (\s, z.B. Leerzeichen und Tabulatoren), einer öffnenden Klammer oder einem Bindestrich begrenzt wird. Alternativen werden durch | gekennzeichnet.

Zuletzt darf der Ausdruck nur von bestimmten Zeichen beendet werden: dem Zeilenende ($), Interpunktionszeichen wie Punkten und Kommas oder Weißraum-Zeichen wie Leerzeichen.

nach obennach unten

Beispiel mit Erläuterungen

Beispiel (HTML-Datei)

Popup-Seite Anzeigebeispiel: So sieht’s aus

Dies ist eine Beispieldatei, die zeigt, welche Erserzungen das Script vornimmt. Mittels script-Element wird die JavaScript-Datei eingebunden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Beispiel: Anf&uuml;hrungszeichen</title>
  <script type="text/javascript" src="beispiel.js"></script>
  <style type="text/css">
  /* Verwende Unicode-Schriftart, um alle Zeichen
     richtig darzustellen
     (Liste der Schriftarten aus de.wikipedia.org/wiki/Vorlage:Unicode)  */
  body {
  font-family:"TITUS Cyberbit Basic", "Code2000", "Doulos SIL", 
  "Chrysanthi Unicode", "Bitstream Cyberbit", "Bitstream CyberBase",
  "Bitstream Vera", "Thryomanes", "Gentium", "GentiumAlt",
  "Visual Geez Unicode", "Lucida Grande", "Arial Unicode MS",
  "MV Boli", "MS Mincho", "Microsoft Sans Serif", "Lucida Sans Unicode",
  sans-serif;
  }  
  </style>
 </head>
 <body>
  <h1>Beispiel f&uuml;r die Ersetzung von "Anf&uuml;hrungszeichen"</h1>
  <h2>Das Skript unterst&uuml;tzt:</h2>
  <ul>
   <li>
    Deutsch: <strong xml:lang="de" lang="de">"Dies ist ein 'Blindtext'..."</strong>
   </li>
   <li>
    Englisch: <strong xml:lang="en" lang="en">"The quick brown fox jumps 1/2 over the 'lazy'-dog."</strong>
   </li>
   <li>
    Franz&ouml;sisch: <strong xml:lang="fr" lang="fr">"Je 'ne' t'aime plus."</strong>
   </li>
   <li>
    Spanisch: <strong xml:lang="es" lang="es">"Este pagina est&aacute; 'muy interesante'."</strong>
   </li>
  </ul>
  <p>
   Sollen die urspr&uuml;nglichen Zeichen nicht ersetzt werden, setzt man den Text in ein
   beliebiges Element mit der Klasse <code>noquotes</code> (Attribut <code>class="noquotes"</code>).
   Auch in <code>code</code>- und <code>kbd</code>-Elementen wird nicht herumgepfuscht.
  </p>
  <pre>pre-Elemente: Hier werden "Anf&uuml;hrungszeichen" und z.B. 1/2 auch nicht ersetzt.</pre>
  <h2>Au&szlig;erdem werden ersetzt:</h2>
  <ul>
   <li>
    Apostrophe: <strong xml:lang="de" lang="de">Klaus' Buch</strong> (deutsch),
    <strong xml:lang="en" lang="en">Uncle Tom's Cabin</strong> (englisch)
   </li>
   <li>Ellipsen: <strong>...</strong></li>
   <li>Br&uuml;che: <strong>1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5 und 4/5</strong></li>
   <li>Der klassische Smiley: <strong style="font-size:1.3em;">:-)</strong></li>
   <li>Copyright-Symbole: <strong>(c), (r), (tm)</strong></li>
   <li>Pfeile: <strong>&lt;--, -->, &lt;==, ==&gt;</strong></li>
  </ul>
 </body>
</html>

Beispiel (JavaScript-Datei)

// Funktion, mit der sich eine Funktion beim Laden des Dokuments ausfuehren laesst
function addLoadEvent (func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    };
  }
}

// Fuehre die Funktion suchtTextknoten beim Laden aus
addLoadEvent(sucheTextknoten);

// Wir legen eine Standard-Sprache fest, falls keine Sprache angegeben wurde
var standardLanguage = "de";

// In den folgenden Objekten speichern wir abhaengig von
// der Sprache die Anfuehrungszeichen
var openingQuotes = new Object();
var closingQuotes = new Object();
openingQuotes['de'] = "\u201E";
closingQuotes['de'] = "\u201C";
openingQuotes['en'] = "\u201C";
closingQuotes['en'] = "\u201D";
openingQuotes['fr'] = "\u00AB";
closingQuotes['fr'] = "\u00BB";
openingQuotes['es'] = "\u00AB";
closingQuotes['es'] = "\u00BB";

var openingSingleQuotes = new Object();
var closingSingleQuotes = new Object();
openingSingleQuotes['de'] = "\u201A";
closingSingleQuotes['de'] = "\u2018";
openingSingleQuotes['en'] = "\u2018";
closingSingleQuotes['en'] = "\u2019";
openingSingleQuotes['fr'] = "\u2039";
closingSingleQuotes['fr'] = "\u203A";
openingSingleQuotes['es'] = "\u2039";
closingSingleQuotes['es'] = "\u203A";

// Diese Funktion hangelt sich durch alle Knoten des HTML-Dokuments und
// sucht Textknoten, deren Inhalt veraendert werden soll
function sucheTextknoten () {

  // Hole die Sprache aus dem lang- oder xml:lang-Attribut des html-Elements,
  // sofern gesetzt; Vorgabe: standardLanguage
  var lang = standardLanguage, masterlang = standardLanguage;
  var html_element = document.documentElement;
  if (html_element.getAttribute("xml:lang")) {
    lang = masterlang = html_element.getAttribute("xml:lang").substring(0, 2);
  } else if (html_element.getAttribute("lang")) {
    lang = masterlang = html_element.getAttribute("lang").substring(0, 2);
  }
  if (!openingQuotes[lang]) {
    // Sind fuer die Sprache des Dokuments keine Anfuehrungszeichen gespeichert,
    // verwende englische Anfuehrungszeichen
    lang = masterlang = "en";
  }

  // Hier beginnt das Durchsuchen der Textknoten

  // Ueberpruefe, ob der Browser DOM Traversal unterstuetzt.
  // Schliesse Safari aus, denn dieser kennt zwar createTreeWalker(),
  // hat aber eine grob fehlerhafte Umsetzung: Es werden
  // nicht alle Textknoten gefunden.
  if (document.createTreeWalker && !/Safari/.test(navigator.userAgent) &&
      !/AppleWebKit/.test(navigator.userAgent)) {

    // Erzeuge einen TreeWalker, der alle Textknoten durchlaeuft
    tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, true);

    // Schreite zum ersten Textknoten vor
    tw.firstChild();

    // Aeltere Konqueror-Versionen kennen zwar TreeWalker, der TreeWalker
    // laesst sich allerdings nicht mit firstChild() und nextSibling() fortbewegen.
    // Steige in diesem Fall aus und versuche es mit der Alternativmethode.
    if (document.body !== tw.currentNode) {

      var parentNode, nodeName, className;
      // Durchlaufe alle Textknoten mit einer Schleife
      do {

        // Steige zum Elementknoten auf, das den Textknoten enthaelt
        parentNode = tw.currentNode.parentNode;

        tagName = parentNode.nodeName.toLowerCase();
        className = parentNode.className.toLowerCase();

        // Ueberspringe den Knoten, falls nichts geaendert werden soll
        if (/noquotes/.test(className) ||
          tagName == "script" || tagName == "code" ||
          tagName == "kbd" || tagName == "pre") {
          continue;
        }

        // Schaue nach, ob der Elternknoten eine Sprachangabe besitzt
        if (parentNode.hasAttribute("xml:lang")) {
          lang = parentNode.getAttribute("xml:lang").substring(0, 2);
        } else if (parentNode.lang) {
          lang = parentNode.lang.substring(0, 2);
        }

        // Hier passiert die Magie: Veraendere den Text des Textknotens
        tw.currentNode.nodeValue = veraendereTextknoten(tw.currentNode.nodeValue, lang);

        // Setze die urspruengliche Dokumentsprache wieder ein
        lang = masterlang;

      } while (tw.nextSibling());

      // Steige nach erfolgreicher Arbeit aus der Funktion aus
      return;
    }
  }

  // Alternativzweig fuer Browser, die das neuere TreeWalker-Objekt nicht kennen,
  // z.B. der Internet Explorer

  // Erstelle eine Liste mit allen Elementen im Dokumentkoerper
  var elementliste = document.body.getElementsByTagName("*");

  var i, thisNode, tagName, className;
  // Durchlaufe die Elementliste
  for (i = 0; i < elementliste.length; i++) {

    thisNode  = elementliste[i];
    tagName   = thisNode.tagName.toLowerCase();
    className = thisNode.className.toLowerCase();

    // Ueberspringe den Knoten, falls nichts geaendert werden soll
    if (/noquotes/.test(className) ||
      tagName == "script" || tagName == "code" ||
      tagName == "kbd" || tagName == "pre") {
      continue;
    }

    // Schaue nach, ob der Elementknoten eine Sprachangabe besitzt
    // (leider beachtet der IE das Attribut xml:lang nur im html-Element)
    if (thisNode.lang) {
      lang = thisNode.lang.substring(0, 2);
    }

    // Durchlaufe alle Kindknoten, sofern solche existieren
    if (thisNode.hasChildNodes()) {
      textNode = thisNode.firstChild;
      do {
        // Wenn es sich nicht um einen Textknoten handelt,
        // fahre mit dem naechsten Kindknoten fort
        if (textNode.nodeType != 3) {
          continue;
        }
        // Hier passiert die Magie: Veraendere den Text des Textknotens
        textNode.nodeValue = veraendereTextknoten(textNode.nodeValue, lang);

      } while (textNode = textNode.nextSibling);
    }
    // Setze die urspruengliche Dokumentsprache wieder ein
    lang = masterlang;
  }
}


// Diese Funktion veraendert einen uebergebenen String mittels Regulaeren Ausdruecken
function veraendereTextknoten (string, lang) {

  // Breche die Ersetzung ab, wenn der Textknoten sowieso nur aus Weissraum-Zeichen
  // besteht. Dies macht das Script geringfuegig schneller, weil die vielen
  // replace()-Aufrufe umgangen werden.
  if (/^\s+$/.test(string)) {
    return string;
  }

  // Ersetze einfache Anfuehrungszeichen
  string = string.replace(/(^|\s|[\("\-])'([^']*)'($|[\.,;:!?\/"\)\-]|\s)/g, "$1" +
    openingSingleQuotes[lang] + "$2" + closingSingleQuotes[lang] + "$3");
  string = string.replace(/(^|\s|\(|\-)'$/g, "$1" + openingSingleQuotes[lang]);
  string = string.replace(/^'([\.,;:!?\/\)\-]|\s)/g, closingSingleQuotes[lang] + "$1");
  // Apostroph (de)
  string = string.replace(/([xs])'($|[\.,;:!?\/\)\-]|\s)/g, "$1" +
    closingSingleQuotes["en"] + "$2");
  // Apostroph (en)
  string = string.replace(/([a-z])'s/g, "$1" + closingSingleQuotes["en"] + "s");

  // Ersetze doppelte Anfuehrungszeichen
  string = string.replace(/(^|\s|\(|\-)"([^"]*)"($|[\.,;:!?\/\)\-]|\s)/g,
    "$1" + openingQuotes[lang] + "$2" + closingQuotes[lang] + "$3");
  // wichtig fuer "<span>inhalt</span>"
  string = string.replace(/(^|\s|\(|\-)"(\s*)$/g, "$1" + openingQuotes[lang] + "$2");
  string = string.replace(/^(\s*)"([\.,;:!?\/\)\-]|\s)/g, "$1" +
    closingQuotes[lang] + "$2");

  // Ersetze drei Punkte durch eine horizontale Ellipse
  string = string.replace(/[\.]{3}/g, "\u2026");

  // Ersetze die gaengigen Brueche
  string = string.replace(/([^0-9]|^)1\/2([^0-9]|$)/g, "$1\u00BD$2");
  string = string.replace(/([^0-9]|^)1\/3([^0-9]|$)/g, "$1\u2153$2");
  string = string.replace(/([^0-9]|^)2\/3([^0-9]|$)/g, "$1\u2154$2");
  string = string.replace(/([^0-9]|^)1\/4([^0-9]|$)/g, "$1\u00BC$2");
  string = string.replace(/([^0-9]|^)3\/4([^0-9]|$)/g, "$1\u00BE$2");
  string = string.replace(/([^0-9]|^)1\/5([^0-9]|$)/g, "$1\u2155$2");
  string = string.replace(/([^0-9]|^)2\/5([^0-9]|$)/g, "$1\u2156$2");
  string = string.replace(/([^0-9]|^)3\/5([^0-9]|$)/g, "$1\u2157$2");
  string = string.replace(/([^0-9]|^)4\/5([^0-9]|$)/g, "$1\u2158$2");

  // Ersetze Symbole, Smileys und Pfeile
  string = string.replace(/\(c\)/g, "\u00A9");
  string = string.replace(/\(r\)/g, "\u00AE");
  string = string.replace(/\(tm\)/g, "\u2122");
  string = string.replace(/:-\)/g, "\u263A");
  string = string.replace(/(&lt;|<)--/g, "\u2190");
  string = string.replace(/--(&gt;|>)/g, "\u2192");
  string = string.replace(/(&lt;|<)==/g, "\u21D0");
  string = string.replace(/==(&gt;|>)/g, "\u21D2");

  return string;
}

Erläuterung:

Betrachten wir kurz die HTML-Datei. Wir erkennen, dass im Quelltext Hochkommata stehen. Mittels script-Element wird unsere JavaScript-Datei eingebunden. Außerdem ist die Sprache des Textes im html-Element und in einigen strong-Elementen mit dem Universalattribut lang bzw. xml:lang (in XHTML-Dokumenten) definiert. Für mögliche Sprachangaben siehe den Abschnitt bereichsübergreifende Seite Sprachen- und Länderkürzel.

In einem style-Bereich sehen wir eine Angabe für die Schriftart des body-Bereichs. Sie soll lediglich dafür sorgen, dass auch exotischere Ersetzungen wie der Smiley als Schriftzeichen angezeigt werden.

Das JavaScript registriert zu Beginn einen Event-Handler, um die Funktion sucheKnoten() nach dem Laden des Dokuments aufzurufen. Dies wird üblicherweise mit window.onload = sucheKnoten; gelöst. Allerdings kann darüber nur eine Funktion beim Laden ausgeführt werden. Dies wird z.B. zu einem Problem, wenn man mehrere Scripte einbindet. Abhilfe schafft die Funktion englischsprachige Seite addLoadEvent() von Simon Willison. Mit addLoadEvent() lassen sich mehrere Funktionen beim Laden der Seite aufrufen. Man übergibt ihr dazu die aufzurufende Funktion als Parameter: addLoadEvent(sucheTextknoten);.

Danach folgen die Definitionen einiger Variablen. Wir legen eine Standardsprache fest und definieren bereichsübergreifende Seite assoziative Arrays (Object-Objekte), in denen den Sprachkürzeln die einfache bzw. doppelten Anführungszeichen zugeordnet werden.

Die folgende Funktion sucheKnoten() besteht aus drei Teilen. Zuerst wird die Sprache des Dokuments aus dem lang- bzw. xml:lang-Attribut des html-Elements gewonnen. Ist sie unbekannt, weil keine entsprechende Zuordnung im Objekt openingQuotes definiert wurde, wird als Ausweichlösung die englische Zitatzeichen-Regelung verwendet.

Der zweite Teil wandert durch alle Textknoten des HTML-Dokuments, indem er das TreeWalker-Objekt verwendet, welches im W3C-Standard englischsprachige Seite DOM Traversal definiert ist. Der dritte Teil löst dieselbe Aufgabe in älteren Browser, die DOM Traversal noch nicht unterstützen.

Schauen wir uns das TreeWalker-Objekt an. Es wird mit

tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, true)

erzeugt. Der erste Parameter steht für den Knoten, von dem an der TreeWalker den Dokumentenbaum durchlaufen soll. Wir wollen body-Element anfangen, deshalb wählen wir document.body. NodeFilter.SHOW_TEXT liefert eine Konstante, die den Modus des TreeWalkers bestimmt. Sie besagt nichts anderes, als dass nur Text-Knoten berücksichtigt werden sollen. Eine mögliche andere Angabe wäre z.B. NodeFilter.SHOW_ELEMENT. Dann würden nur Elemente berücksichtigt. Eine Übersicht über mögliche Werte bietet die englischsprachige Seite Traversal-Spezifikation. Als dritten Parameter kann man eine eigene Filterfunktion definieren. Dies lassen wir hier aus und geben deswegen nur null an. Die letzte Angabe bestimmt, ob Entitäten erweitert werden. Für unsere Aufgabe ist das ohne weitere Bedeutung, wir setzen den Wert auf true.

Jetzt können wir die Methoden des TreeWalkers verwenden. Wir wandern mit einer do…while-Schleife durch die Kindknoten, die wir z.B. durch tw.firstChild() und danach tw.nextSibling()ansprechen können. Um herauszufinden, welche Textknoten wir überspringen müssen, betrachten wir jeweils das dazugehörige Elternelement. Außerdem berücksichtigen wir eventuelle Sprachangaben dieses Elements. Soll der Inhalt schließlich verändert werden, rufen wir die Funktion veraendereTextknoten() auf, welche den veränderten Text zurückgibt.

Ohne TreeWalker müssen wir das Pferd anders herum aufzäumen: Der dritte Teil von sucheKnoten() benutzt bereichsübergreifende Seite getElementsByTagName(). Wir durchwandern sämtliche Elementknoten, indem wir statt einer konkreten Namensangabe den Stern * verwenden. Wieder überspringen wir einige Knoten und suchen nach eventuellen Sprachänderungen. Dann folgt eine Schleife, in der sämtliche Textknoten, die direkte Kinder dieses Elements sind, durchlaufen werden. Auf jeden dieser Knoten wird wieder veraendereTextknoten() angewendet.

Die letzte Funktion veraendereTextknoten() hat als Argumente einen String, der verändert werden soll, sowie eine Sprachangabe. Diese Funktion arbeitet nacheinander die verschiedenen angegebenen Regulären Ausdrücke ab und ersetzt entsprechende Funde im String. Anhand der Sprache werden die nötigen Anführungszeichen in den assoziativen Arrays nachgeschlagen.

Anstatt die besonderen Zeichen direkt im Klartext in die JavaScript-Datei zu schreiben, verwenden wir sogenannte Escape-Sequenzen, mit denen sich jedes beliebige Unicode-Zeichen über seine Nummer im Unicode-Standard notieren lässt. "\u201E" liefert einen String mit dem doppelten Anführungszeichen unten („). Nach dem \u wird die hexadezimale Unicode-Zeichennummer, im Beispiel 201E, notiert (das entspricht 8222 im Dezimalsystem). Diese Schreibweise hat den Vorteil, dass die JavaScript-Datei in einer beliebigen bereichsübergreifende Seite Zeichenkodierung vorliegen kann. Würden wir die Zeichen direkt verwenden, müsste die Datei z.B. in UTF-8 kodiert sein.

Beachten Sie:

Vor- und Nachteile

Wie bei jedem Einsatz von JavaScript sollte man sich Gedanken über Vor- und Nachteile dieser Methode machen.

Vorteile:

Nachteile:

Zwei mögliche Alternativen für das hier beschriebene Script sind die Ersetzung bei der Eingabe, z.B. durch die Anwendung des Scripts bei der Eingabe in einem Content-Management-System, oder die serverseitige Ersetzung (z.B. mittels PHP) bei der Anfrage. Auch diese beiden haben ihre Nachteile, sodass es im wesentlichen auf Anwendungsgebiet und Geschmack des Seitenautors ankommt, welche Variante man verwendet.

Unterstützte Browser

Das Script wurde von unter Windows mit dem Internet Explorer 6, Firefox 1.0 und 1.5, Opera 7.11, Safari 2.0 und Konqueror 3.4.1 getestet und für funktionsfähig befunden.

Für zwei Browser mussten gesonderte Abfragen eingebaut werden: Konqueror 3.4 und Safari 2.0 kennen zwar document.createTreeWalker(), haben aber schwerwiegende Fehler bei der Umsetzung von DOM Traversal. Sie verwenden daher die konventionelle Methode mit getElementsByTagName().

In alten Konqueror-Versionen funktioniert das Durchlaufen der Knoten nicht, in der aktuellen Version 3.5.3 funktioniert der TreeWalker fehlerfrei. Im Safari 2.0 durchläuft der TreeWalker. Während der Konqueror-Fehler gezielt erkennbar ist, muss Safari durch eine unschöne Browserweiche erkannt werden. Dadurch werden nicht nur fehlerhafte Safari-Versionen ausgeschlossen, sondern auch mögliche fehlerfreie zukünftige Versionen. Dieser Workaround ist daher nicht auf Dauer angelegt.

Weitere Anwendungen

Die vorgestellte Methode kann für viele weitere Aufgaben verwendet werden. Durch eine weitere Zeile in veraendereTextknoten kann man beliebige Zeichen oder Zeichenketten ersetzen. Mit etwas mehr Aufwand kann die Methode auch verwendet werden, um z.B. Smileys durch Grafiken zu ersetzen.

nach obennach unten

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

bereichsübergreifende Seite SELFHTML: Das node-Objekt bietet viele Methoden, die auch vom TreeWalker verwendet werden
bereichsübergreifende Seite SELFHTML: RegExp-Objekt
bereichsübergreifende Seite SELFHTML: Reguläre Ausdrücke
bereichsübergreifende Seite SELFHTML: Sprachen- und Länderkürzel werden im Beispiel verwendet, um verschiedene Anführungszeichen zu unterscheiden
bereichsübergreifende Seite SELFHTML: HTML-Zeichenreferenz
deutschsprachige Seite Typografie für Webautoren auf crissov.de
deutschsprachige Seite Artikel „Anführungszeichen“ in der Wikipedia
englischsprachige Seite W3C: TreeWalker interface
englischsprachige Seite Programmierfehler im Safari (WebKit) bezüglich TreeWalker

Teil von SELFHTML aktuell Teil von Artikel Teil von JavaScript

© 2007 bereichsübergreifende Seite Impressum, für diese Seite: E-Mail Manuel Strehl