JPKCom DB

Coder — Beispiele

Praxis-Durchläufe mit dem Coder: String Base64-kodieren, JWT dekodieren, Sonderzeichen URL-encodieren, Bild als Data-URI einbetten, HTML und JSON escapen.

Zurück zur Übersicht: Coder · Tool live öffnen: www.jpkc.com/tools/coder/

Das Manual erklärt jeden Reiter im Detail. Diese Seite ergänzt das um konkrete Durchläufe — typische Aufgaben, Schritt für Schritt, mit Fokus auf Eingabe und Ausgabe. Die Oberfläche ist auf Englisch; Reiter- und Button-Namen stehen deshalb im Original.

Beispiel 1: Einen String Base64-kodieren

Du brauchst einen Wert Base64-kodiert, etwa für einen Header oder eine Konfiguration.

  1. Öffne den Coder und wechsle in den Reiter Base64.
  2. Füge deinen Text ein, z. B. Grüße aus München.
  3. Klick Encode. Im Feld steht jetzt R3LDvMOfZSBhdXMgTcO8bmNoZW4= — die Umlaute sind dank UTF-8-sicherer Kodierung korrekt enthalten.
  4. Mit Copy landet der String in der Zwischenablage. Zum Gegencheck fügst du ihn wieder ein und klickst Decode — du bekommst exakt Grüße aus München zurück.

Wichtig: Ist der String beim Decode kein gültiges Base64, meldet das Tool das, statt eine kaputte Ausgabe zu liefern.

Beispiel 2: Ein JWT dekodieren und die Payload lesen

Du hast ein Token aus einem API-Response oder einem Cookie und willst sehen, was drinsteht.

  1. Wechsle in den Reiter JWT und füge das komplette Token ein (die drei punktgetrennten Teile, beginnend mit eyJ…).
  2. Klick Decode. Das Tool zerlegt das Token und zeigt drei Karten:
    • Header — als formatiertes JSON, z. B. { "alg": "HS256", "typ": "JWT" }.
    • Payload — ebenfalls formatiert, mit den Claims (sub, name, iat, exp, …).
    • Signature — der rohe Signatur-String, unverändert.
  3. Enthält die Payload ein exp, zeigt ein Badge, ob das Token gültig ist oder abgelaufen (mit Relativzeit wie „vor 2 Stunden"); ein iat ergibt ein „Issued"-Badge.
  4. Per Copy-Button neben Header oder Payload übernimmst du den jeweiligen JSON-Block — etwa um ihn im JSON Editor weiterzuverarbeiten.

Merke: Das Tool prüft die Signatur nicht. Es zeigt dir, was die Payload behauptet, nicht, ob das Token gültig signiert ist — siehe dazu die Tipps. Weil alles im Browser läuft, verlässt das Token deinen Rechner aber nicht.

Beispiel 3: Sonderzeichen fuer eine URL kodieren

Du willst einen Suchbegriff oder Parameter-Wert sicher in eine URL packen.

  1. Wechsle in den Reiter URL und füge den Rohwert ein, z. B. Müller & Sohn (Café).
  2. Klick Encode. Ergebnis: M%C3%BCller+%26+Sohn+%28Caf%C3%A9%29.
  3. Beachte das + für Leerzeichen — der Coder kodiert im Formular-Stil (application/x-www-form-urlencoded), nicht mit %20. Für Query-Strings ist das genau richtig.
  4. Decode kehrt es wieder um: + wird zu Leerzeichen, der Rest über decodeURIComponent aufgelöst — du erhältst Müller & Sohn (Café) zurück.

Beispiel 4: Ein Bild als Data-URI einbetten

Du willst ein kleines Icon direkt ins CSS einbetten, statt eine separate Datei auszuliefern.

  1. Wechsle in den Reiter Data URI und klick bei Select a file auf deine Datei (z. B. ein kleines PNG oder SVG).
  2. Der Browser liest die Datei lokal ein; die Fortschrittsanzeige läuft auf 100 %.
  3. Im Ausgabefeld steht die fertige data:image/png;base64,…-URI. Darunter siehst du Datei-Infos: Name, MIME-Typ, Größe, Änderungsdatum.
  4. Copy übernimmt die URI; du fügst sie z. B. als background-image: url(data:image/png;base64,…) ein.

Praxis-Tipp: Data-URIs lohnen vor allem für kleine Assets. Base64 bläht die Daten um rund ein Drittel auf — bei großen Bildern wird die URI sehr lang und ist meist unpraktisch. Die Datei wird dabei nie hochgeladen, alles bleibt im Browser.

Beispiel 5: HTML-Code fuer die Anzeige escapen

Du willst ein Code-Beispiel in einem Artikel anzeigen, ohne dass der Browser es rendert.

  1. Wechsle in den Reiter HTML und füge das Markup ein, z. B. <a href="/x">Link</a>.
  2. Klick Encode. Ergebnis: &lt;a href="/x"&gt;Link&lt;/a&gt; — die spitzen Klammern stehen jetzt als Text.
  3. Soll auch das Anführungszeichen im Attribut entschärft werden (etwa weil der Schnipsel selbst in ein Attribut wandert), nimm stattdessen den Reiter HTML+: Dann wird " zusätzlich zu &quot; und ' zu &#39;.
  4. Decode macht den Schritt rückgängig — aber nur für genau die Entities, die das Tool erzeugt; beliebige Entities wie &nbsp; werden hier nicht aufgelöst.

Beispiel 6: Einen JSON-String fuer Code escapen

Du willst einen mehrzeiligen Text als String-Wert in eine JSON-Datei oder in Quellcode einsetzen.

  1. Wechsle in den Reiter JSON und füge den Rohtext ein, inklusive Zeilenumbrüchen, Tabs und Anführungszeichen.
  2. Klick Escape. Aus Zeilenumbrüchen wird \n, aus Tabs \t, aus " wird \" und aus \ wird \\.
  3. Den escapten String kannst du nun direkt als Wert in "key": "…" einsetzen, ohne dass das JSON zerbricht.
  4. Unescape kehrt das um — praktisch, wenn du einen escapten Wert aus einer JSON-Datei wieder lesbar machen willst.

Grenze: Der Reiter behandelt String-Literale, keine ganzen Dokumente, und deckt das Set \\ \" \n \r \t ab (keine \uXXXX-Escapes). Für komplette JSON-Dateien nutze den JSON Editor.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jeden Reiter im Detail und die Tipps & Tricks für die Feinheiten. Ausprobieren kannst du alles direkt im Tool.