Caps Lock Text korrigieren

So funktioniert das Script

Das Script hat vier Bestandteile: eine Tabelle mit den Tastenpaaren, eine Funktion, die ein einzelnes Zeichen umdreht, eine Schleife, die den ganzen Text Zeichen für Zeichen durchgeht, und die Anmeldung der drei Knöpfe. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen nicht mit anderen Scripts auf der Seite kollidieren. Das Original löste dieselbe Aufgabe mit rund dreißig hintereinandergeschriebenen if-Abfragen — die Rechnung dahinter ist unverändert, nur übersichtlicher notiert.

const tastenpaare = {
  "!": "1", "1": "!",
  '"': "2", "2": '"',
  "§": "3", "3": "§",
  "&": "6", "6": "&",
  …
};

Das ist ein Objekt, hier als Nachschlagetabelle benutzt: links das gefundene Zeichen, rechts das Zeichen, das stattdessen erscheinen soll. Jedes Paar steht zweimal drin — einmal in jeder Richtung —, denn das Script soll ja in beide Richtungen tauschen können. Beim Anführungszeichen fällt auf, dass die Zeile in einfachen Hochkommas steht: '"'. Das ist nötig, weil ein doppeltes Anführungszeichen sonst den Text vorzeitig beenden würde. Umgekehrt steht das Hochkomma-Paar in doppelten Anführungszeichen.

if (Object.prototype.hasOwnProperty.call(tastenpaare, zeichen)) {
  return tastenpaare[zeichen];
}

Hier wird zuerst geprüft, ob das aktuelle Zeichen überhaupt in der Tabelle steht. hasOwnProperty heißt „hat eine eigene Eigenschaft" und antwortet mit true oder false. Trifft es zu, liefert tastenpaare[zeichen] den Partner aus der Tabelle, und return beendet die Funktion sofort — die folgenden Zeilen laufen dann gar nicht mehr.

if (zeichen === zeichen.toUpperCase()) {
  return zeichen.toLowerCase();
}
return zeichen.toUpperCase();

Für alle übrigen Zeichen entscheidet ein einfacher Trick über die Richtung: Ist das Zeichen bereits identisch mit seiner Großbuchstaben-Fassung, war es groß — also wird es klein gemacht. Andernfalls war es klein und wird groß. Das Gleichheitszeichen steht hier dreifach (===): Dieser strikte Vergleich prüft Wert und Typ und ist die empfohlene Schreibweise. Zeichen ohne Groß- und Kleinschreibung, etwa das Leerzeichen, überstehen die Prüfung unverändert — ihre große und ihre kleine Form sind dieselbe.

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

Die Schleife zählt i von 0 bis zum letzten Zeichen hoch. text.charAt(i) holt das Zeichen an dieser Stelle — gezählt wird ab 0, das erste Zeichen hat also die Nummer 0. Jedes umgedrehte Zeichen wird mit += hinten an ergebnis angehängt, sodass nach dem letzten Durchlauf der fertige Text zusammengesetzt ist. Erst danach landet er mit ausgabe.value = ergebnis im unteren Feld.

document.getElementById("cl-korrigieren").addEventListener("click", textKorrigieren);
document.getElementById("cl-eingabe-leeren").addEventListener("click", function () {
  eingabe.value = "";
});

Zum Schluss werden die drei Knöpfe mit ihren Aufgaben verbunden. Der erste bekommt die fertige Funktion textKorrigieren mitgegeben, die beiden Löschknöpfe eine namenlose Funktion, die nur eine einzige Zeile enthält — für solche Kleinigkeiten lohnt kein eigener Name. Das Script steht dafür unter dem Formular, damit Felder und Knöpfe schon existieren, wenn es ausgeführt wird.

Zum Anpassen: Die Tastenpaare oben sind die interessanteste Stelle. Wer auf einer amerikanischen Tastatur schreibt, ersetzt sie durch die dortigen Paare (@ 2, # für die 3 und so weiter); wer nur Buchstaben umdrehen möchte, leert die Tabelle einfach auf {} — dann bleiben Ziffern und Satzzeichen unangetastet.