JavaScripts › Texteffekte

Namen rückwärts gelesen

Dreht einen eingegebenen Namen Buchstabe für Buchstabe um und zeigt, wie er von hinten gelesen aussieht.

Wolltet ihr schon immer wissen, wie euer Name rückwärts geschrieben aussieht? Dieses kleine Script von unserem User heiopei nimmt euch das Umdrehen ab. Es eignet sich gut als Spielerei für die eigene Homepage, für ein Gästebuch oder einfach zum Ausprobieren mit den Namen der ganzen Familie.

Tragt einen Namen in das Feld ein und klickt auf den Knopf — darunter erscheint eine Begrüßung und der Name von hinten gelesen. Es müssen keine Namen sein: Ganze Sätze funktionieren genauso, nur werden auch die Leerzeichen mit umgedreht.

Wenn ein Wort vorwärts und rückwärts gleich gelesen wird, nennt man es Palindrom. Anna, Otto, Ebbe, Rentner und Reittier gehören dazu, und mit „Ein Esel lese nie“ gibt es sogar einen ganzen Satz, der sich umdrehen lässt. Spannend sind auch Wörter, aus denen rückwärts ein anderes sinnvolles Wort wird: aus „Lager“ wird „Regal“, aus „Leben“ wird „Nebel“ und aus „nie“ wird „ein“. Probiert das ruhig im Feld unten aus.

Verwandte Spielereien haben wir im selben Fach: Text auf dem Kopf dreht den Text nicht nur um, sondern stellt jeden Buchstaben zusätzlich auf den Kopf. Und wer aus einem Namen etwas machen will, das man nicht auf Anhieb entziffert, wirft einen Blick auf die ROT13-Verschlüsselung.

Texteffekte Baujahr 2007 läuft in deinem Browser
Eingesandt von heiopei

So funktioniert das Script

Das Script hat drei Aufgaben: das Eingabefeld auslesen, die Buchstaben in umgekehrter Reihenfolge zusammensetzen und das Ergebnis anzeigen. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Script nicht mit anderem Code auf der Seite kollidieren.

const text = document.getElementById("nr-name").value.trim();

getElementById() sucht das Element mit der angegebenen id — hier das Eingabefeld. Über value kommt man an das, was darin steht. trim() schneidet Leerzeichen am Anfang und Ende weg; das verhindert, dass ein versehentlicher Leerschlag als „Name“ durchgeht.

if (text === "") {
  ausgabe.textContent = "Bitte tragt zuerst einen Namen in das Feld ein.";
  return;
}

Ist das Feld leer, erscheint ein freundlicher Hinweis statt eines leeren Ergebnisses, und return beendet die Funktion sofort. Die drei Gleichheitszeichen sind der strenge Vergleich: Er prüft Wert und Datentyp und ist damit die sichere Wahl.

let neuText = "";
for (let i = 0; i < text.length; i++) {
  neuText = text.charAt(i) + neuText;
}

Das ist der Kern. Die Schleife läuft von vorn nach hinten durch den Text, charAt(i) holt dabei das Zeichen an der Stelle i. Der Kniff steckt in der Reihenfolge beim Zusammensetzen: Der neue Buchstabe wird immer vor das bisherige Ergebnis gesetzt. Bei „Anke“ entsteht so nacheinander "A", dann "nA", dann "knA" und schließlich "eknA". Das Wort baut sich also von hinten auf, obwohl die Schleife vorwärts läuft.

ausgabe.textContent = "Hallo " + text + " — dein Name von hinten gelesen: ";
const hervorgehoben = document.createElement("strong");
hervorgehoben.textContent = neuText;
ausgabe.appendChild(hervorgehoben);

Zum Schluss wird das Ergebnis angezeigt. textContent setzt reinen Text in ein Element — alles, was da hineingeschrieben wird, erscheint genau so und wird nie als HTML ausgeführt. Das ist bei Eingaben von Besuchern die sichere Variante. Weil der umgedrehte Name trotzdem fett erscheinen soll, wird mit createElement("strong") ein neues Element erzeugt, mit Text gefüllt und per appendChild() an die Ausgabefläche gehängt.

document.getElementById("nr-knopf").addEventListener("click", textUmdrehen);

Diese Zeile verbindet den Knopf mit der Funktion: Bei jedem Klick läuft textUmdrehen(). Das Script steht dafür unter dem Formular, damit Feld und Knopf schon existieren, wenn es ausgeführt wird.

Zum Anpassen: Der Begrüßungstext lässt sich frei ändern — schreibt statt „Hallo“ etwa „Rückwärts heißt du“. Wer es ganz kurz mag, kann die Schleife auch durch eine einzige Zeile ersetzen: const neuText = text.split("").reverse().join(""); zerlegt den Text in eine Liste einzelner Zeichen, dreht sie um und setzt sie wieder zusammen. Ein Hinweis für Neugierige: Emojis bestehen intern oft aus zwei Zeichen und gehen bei beiden Varianten kaputt. Wer auch die richtig umdrehen will, nimmt Array.from(text).reverse().join("").

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Texteffekte