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

Base64 Encoder / Decoder Text

Autor: Kategorie: Blog

Beitragsseiten

Beschreibung des Base64 Encoder / Decoder Tools

Dieses Tool ermöglicht es dir, Texte schnell und komfortabel in das Base64 Format zu kodieren oder aus Base64 wieder zu entschlüsseln. Es eignet sich ideal für Entwickler, Administratoren und Anwender, die regelmäßig mit codierten Daten arbeiten.

Das Tool besteht aus zwei nebeneinander angeordneten Eingabefeldern:

  • Klartext‑Fenster: Hier gibst du normalen Text ein. Während der Eingabe wird der Inhalt automatisch in Base64 umgewandelt und im rechten Fenster angezeigt.
  • Base64‑Fenster: Wenn du hier einen Base64‑String einfügst oder eingibst, wird er automatisch entschlüsselt und im linken Fenster als Klartext dargestellt.

Base64 Encoder / Decoder

Gib Text ein und er wird automatisch verschlüsselt oder entschlüsselt.

Klartext (automatisch verschlüsselt)

Base64 (automatisch entschlüsselt)


Zusätzlich stehen dir praktische Funktionen zur Verfügung:

  • Kopieren: Der Inhalt eines Fensters kann mit einem Klick in die Zwischenablage kopiert werden.
  • Speichern als TXT: Jeder Text kann direkt als .txt-Datei heruntergeladen werden.
  • Löschen: Ein Klick entfernt den gesamten Inhalt des jeweiligen Fensters.

Es arbeitet vollständig lokal im Browser, ohne externe Server oder Datenübertragung, und reagiert sofort auf jede Eingabe.



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.