URL-Kodierung erklärt: Prozentkodierung, Query-Strings & kaputte Links

Schon mal einen Link eingefügt und %C3%A4 gesehen, wo ein Buchstabe stehen sollte, oder einen Query-Parameter, der plötzlich kaputt war? Das ist URL-Kodierung am Werk. Sie zu verstehen macht aus diesen kryptischen Strings etwas Nachvollziehbares.

Warum URLs Kodierung brauchen

Eine URL darf nur einen begrenzten Satz an ASCII-Zeichen enthalten. Alles andere — Leerzeichen, Nicht-ASCII-Text oder Zeichen mit besonderer Bedeutung wie ?, &, #, / — muss prozentkodiert werden: ersetzt durch ein % gefolgt vom zweistelligen Hex-Wert des Bytes. Ein Leerzeichen wird z. B. zu %20 und ä (UTF-8) zu %C3%A4.

Mit einem URL-Encoder kodierst oder dekodierst du jeden String sofort.

Reservierte vs. nicht reservierte Zeichen

• Nicht reservierte Zeichen (A–Z a–z 0–9 - _ . ~) müssen nie kodiert werden.
• Reservierte Zeichen (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) haben strukturelle Bedeutung in einer URL. Ob du sie kodierst, hängt vom Kontext ab — innerhalb eines Werts müssen sie kodiert werden, als Struktur nicht.

Das ist der Kern des Unterschieds zwischen encodeURIComponent und encodeURI.

encodeURIComponent vs. encodeURI

• encodeURIComponent kodiert auch reservierte Zeichen. Nutze es für einen einzelnen Wert — einen Query-Parameter, ein Pfadsegment.
• encodeURI lässt strukturelle Zeichen (/ ? & =) unverändert. Nutze es für eine ganze URL, die du nicht zerteilen willst.

encodeURIComponent("a b&c=d") // "a%20b%26c%3Dd"  ✅ sicher als Wert
encodeURI("https://x.com/a b") // "https://x.com/a%20b"  ✅ ganze URL

Die falsche Wahl ist eine häufige Bug-Quelle: Nutzt du encodeURI auf einem Wert, wird das & darin nicht escaped und zerstört deinen Query-String.

%20 vs. +

Beide können ein Leerzeichen darstellen, aber in verschiedenen Kontexten. Im URL-Pfad und modernen Query-Strings ist der Standard %20. Das + für ein Leerzeichen stammt aus dem älteren application/x-www-form-urlencoded-Format von HTML-Formularen. Im Zweifel ist %20 die sichere, universelle Wahl — und genau das erzeugt unser Tool.

Der klassische Doppelkodierungs-Bug

Wird ein String zweimal kodiert, wird %20 zu %2520 (weil das % selbst zu %25 kodiert wird). Symptome: buchstäbliches %20 im Browser oder Leerzeichen, die zu %2520 werden. Die Lösung: genau einmal kodieren — bei unklarem Zustand zuerst dekodieren. Ein Decoder macht es leicht zu prüfen, was du tatsächlich hast.

Kurzreferenz

• Einen Parameterwert kodieren? → encodeURIComponent.
• Eine ganze URL kodieren? → encodeURI.
• Ein verirrtes %XX? → dekodieren, um das Original zu lesen.

Kodiere und dekodiere URLs und Query-Parameter sofort mit dem kostenlosen URL-Encoder / -Decoder — er läuft lokal in deinem Browser.