Text ersetzen

[Ashura]

Hallo juppinger.

Nun möchte ich z.B. das Wort "Text" innerhalb des SPANs ersetzen mit dem Wort "Wortlaut".
[…]
Geht da was evtl. mit RegExpressions ?

Es geht sogar ohne.

„Text innerhalb eines Elementes aber nicht dessen Kindelemente ersetzen“
  Ein Rezept für jedermann

Zutaten:

• 1x Grundwissen über den Aufbau des Dokumentenbaumes im JS
  • Einige Methoden und Eigenschaften:
    • 1x http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload
    • 1x getElement*
    • 1x (+3x) http://de.selfhtml.org/javascript/objekte/array.htm#length@title=length
    • 1x http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes@title=childNodes
    • 1x http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nodeType
    • 1x http://de.selfhtml.org/javascript/objekte/string.htm#replace@title=replace
  • 2x Variable oder Array, welche(r) die zu ersetzenden Werte und ihre Ersetzungen enthält

Zubereitung:

Man nehme http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById, http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName oder http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName, um auf das jeweilige Element zuzugreifen. Natürlich müssen wir mit Hilfe von onload erst ein wenig warten, bis das Element bereit ist.
  Außerdem benutzen wir nun die beiden Variablen oder Arrays (falls wir uns zukünftig entscheiden sollten, weitere Werte aufzunehmen), um die Substitutionen festzulegen. Wenn wir bei den Arrays keine Unordnung hinterlassen wollen, so prüfen wir am Besten vor der Benutzung mit length, ob ihre Länge übereinstimmt.
  Wurden alle Vorbereitungen getroffen, können wir uns nun an die eigentlichen Arbeitsschritte wagen.
  Als erstes durchlaufen wir mit einer Schleife und childNodes alle Kindelemente des Elementes, auf das wir uns am Anfang Zugriff verschafft haben. In dieser Schleife fragen wir nun ab, ob der nodeType des Kindelementes mit der Zahl 3 (Textknoten) übereinstimmt. Ist dies der Fall, so ersetzen wir mit nodeValue und replace im Wert des Textknoten die Zeichenkette(n) durch ihre Ersetzunge(n), welche wir Anfangs festgelegt hatten.
  Haben wir uns für die Array-Methode entschieden, so fügen wir in der Abfrage noch eine weitere Schleife hinzu, welche alle Elemente im Array, in dem die zu ersetzenden Zeichenketten festgelegt wurden, mittels replace durch die passenden Gegenstücke ersetzt.
  Das ganze lassen wir nun im gut vorgewärmten Browser durchlaufen.

Bon Appetite!

Einen schönen Donnerstag noch.

Gruß, Ashura