SK-REG BLOG

Dieser Block befindet sich derzeit im Aufbau und wird
ständig erweitert. Daher bitten wir um Verständnis, falls noch
nicht alle Funktionalitäten zur Verfügung stehen.
Dieses Projekt sehe ich als Terapie, um nicht zu vergessen
Details

Funktionsweise des JavaScript im Base64‑Tool

Das Base64‑Tool verwendet JavaScript, um Eingaben in Echtzeit zu kodieren und zu dekodieren, sowie um praktische Aktionen wie Kopieren, Löschen und Speichern als Textdatei auszuführen. Im Folgenden wird die Funktionsweise der wichtigsten Funktionen beschrieben.

1. Live‑Kodierung von Klartext zu Base64

Die Funktion encodeLive() wird immer dann aufgerufen, wenn sich der Inhalt des Klartext‑Feldes ändert. Dazu ist ein input-Eventlistener auf dem Klartext‑Textarea (plainText) gesetzt:

plainEl.addEventListener('input', encodeLive);

In encodeLive() passiert Folgendes:

  • Der eingegebene Text wird mit TextEncoder() in UTF‑8‑Bytes umgewandelt.
  • Diese Bytes werden in eine Binärzeichenkette konvertiert.
  • Die Binärzeichenkette wird mit btoa() in Base64 kodiert.
  • Das Ergebnis wird automatisch im Base64‑Feld (base64Text) angezeigt.

2. Live‑Dekodierung von Base64 zu Klartext

Die Funktion decodeLive() wird immer dann aufgerufen, wenn sich der Inhalt des Base64‑Feldes ändert. Dazu ist ein input-Eventlistener auf dem Base64‑Textarea (base64Text) gesetzt:

base64El.addEventListener('input', decodeLive);

In decodeLive() passiert Folgendes:

  • Der Base64‑String wird mit atob() in eine Binärzeichenkette umgewandelt.
  • Diese Zeichenkette wird in ein Uint8Array von Bytes konvertiert.
  • Die Bytes werden mit TextDecoder() wieder in Klartext dekodiert.
  • Der entschlüsselte Text wird automatisch im Klartext‑Feld angezeigt.
  • Bei ungültigem Base64 wird eine Fehlermeldung im Fehlerfeld (base64Error) ausgegeben.

3. Kopieren des Inhalts

Die Funktion copyText(id) kopiert den Inhalt eines Textfeldes in die Zwischenablage:

  • Über die id wird das entsprechende Textfeld gefunden.
  • Der Inhalt wird mit select() markiert.
  • document.execCommand('copy') legt den Text in die Zwischenablage.

4. Löschen des Inhalts

Die Funktion clearText(id) setzt den Inhalt des angegebenen Textfeldes auf einen leeren String:

  • Das Textfeld wird über seine id gefunden.
  • Der Wert wird auf '' gesetzt.
  • Eventuelle Fehlermeldungen in plainError und base64Error werden gelöscht.

5. Speichern als TXT‑Datei

Die Funktion saveText(id, filename) ermöglicht das Herunterladen des Inhalts eines Textfeldes als .txt-Datei:

  • Der Text wird aus dem entsprechenden Textfeld gelesen.
  • Ein Blob mit dem MIME‑Typ text/plain wird erzeugt.
  • Über ein temporäres <a>-Element mit download-Attribut wird der Download ausgelöst.
  • Die erzeugte URL wird anschließend wieder freigegeben (URL.revokeObjectURL()).

Alle Funktionen arbeiten vollständig im Browser und senden keine Daten an externe Server. Dadurch ist das Tool schnell, direkt und datenschutzfreundlich.