URL-Encoder & -Decoder
Kodieren oder dekodieren Sie URLs und URL-Komponenten — mit Komponentenwahl und Multi-Modi (encodeURI vs encodeURIComponent).
Was ist URL-Kodierung?
URL-Kodierung (auch Prozentkodierung genannt) ist eine Möglichkeit, Zeichen darzustellen, die in einer URL nicht sicher sind — Leerzeichen, Umlaute, &, ?, # und so weiter — indem sie durch % gefolgt vom hexadezimalen Bytewert ersetzt werden. Der Standard ist in RFC 3986 definiert. Bei Nicht-ASCII-Zeichen kommen die Bytes aus der UTF-8-Kodierung, sodass é zu %C3%A9 wird (zwei Bytes). Dieses Tool verpackt die im Browser eingebauten Funktionen encodeURIComponent und decodeURIComponent.
So nutzt du diesen Encoder
Wähle Kodieren oder Dekodieren über den Modus-Schalter und entscheide dich dann für den Bereich. Komponente ist die richtige Standardwahl für Query-String-Werte, Formularfelder und alles, was du in ?key=… einsetzen willst. Vollständige URL ist für komplette URLs gedacht, die du nur minimal escapen willst — sie lässt : / ? & = # unangetastet, damit die strukturellen Zeichen ihre Bedeutung behalten. Füge deinen Text ein und das Ergebnis aktualisiert sich live. Mit „In Eingabe übernehmen“ verschiebst du die Ausgabe zurück in die Eingabe und kippst den Modus für einen schnellen Round-Trip.
Komponente vs. Vollständige URL — was wählen?
Wenn du einen einzelnen Wert kodierst (Suchbegriff, Redirect-Ziel, E-Mail-Adresse) und ihn in einen Query-String einfügst, nimm Komponente. Wenn du eine vollständige URL kodierst, die schon weitgehend gültig ist und du nur die unsicheren Stellen escapen willst, nimm Vollständige URL. Die beiden verhalten sich bei Zeichen wie ? und & sehr unterschiedlich — Komponente kodiert sie, Vollständige URL nicht. Im Zweifel: kodiere die Werte innerhalb einer URL mit Komponente und setze die URL dann selbst zusammen.
Häufige Prozentkodierungen
| Zeichen | Kodiert | Hinweise |
|---|---|---|
| space | %20 | Leerzeichen werden in URLs zu %20 (oder zu + in formularkodierten Bodies). |
| & | %26 | Trennt Query-String-Parameter; muss innerhalb eines Werts kodiert werden. |
| = | %3D | Trennt den Namen eines Query-Parameters von seinem Wert. |
| ? | %3F | Markiert den Beginn des Query-Strings. |
| # | %23 | Markiert den Beginn des URL-Fragments (Anker). |
| / | %2F | Pfadtrenner; nur innerhalb von Pfadsegmenten kodiert. |
| é | %C3%A9 | Nicht-ASCII-Zeichen werden in UTF-8 kodiert und dann Byte für Byte prozent-escaped. |
Häufig gestellte Fragen
Wird etwas an einen Server gesendet?
encodeURIComponent / decodeURIComponent. Nichts wird geloggt oder übertragen. Du kannst das in den DevTools > Netzwerk bestätigen — beim Tippen werden keine Requests abgesetzt.Warum bedeutet + manchmal ein Leerzeichen?
application/x-www-form-urlencoded, die bei HTML-Formular-Übermittlungen verwendet wird. Dort werden Leerzeichen zu + statt zu %20. Die Prozentkodierung nach RFC 3986 (die dieses Tool nutzt) verwendet immer %20. Wenn du den Body einer Formular-Übermittlung dekodierst und dort + statt Leerzeichen siehst, ersetze sie vorher durch Leerzeichen oder nimm einen dedizierten Form-Decoder.Warum schlägt das Dekodieren mit einem Fehler fehl?
decodeURIComponent wirft einen URIError, wenn die Eingabe ein einzelnes % enthält, dem keine zwei gültigen Hex-Ziffern folgen, oder wenn die resultierenden Bytes kein gültiges UTF-8 ergeben. Häufige Übeltäter sind doppelt kodierte Strings (Dekodieren zweimal ausführen) oder kopierte URLs, die durch eine Auto-Korrektur verstümmelt wurden.Was ist der Unterschied zwischen encodeURI und encodeURIComponent?
encodeURI ist für komplette URLs gedacht — es lässt : / ? & = # @ und + in Ruhe, weil diese Zeichen in einer URL strukturelle Bedeutung tragen. encodeURIComponent ist für einzelne Bestandteile einer URL (ein Query-Wert, ein Pfadsegment) und kodiert alles, was nicht zu den unreservierten Zeichen gehört. Faustregel: baue eine URL, indem du encodeURIComponent-kodierte Teile zusammenfügst; verlasse dich bei Nutzereingaben niemals auf encodeURI.Kann ich Emojis kodieren?
%F0%9F%8E%89), weil es ein 4-Byte-UTF-8-Codepoint außerhalb der Basisebene ist. Beim Dekodieren läuft der Prozess umgekehrt — am Ende steht das ursprüngliche Emoji.Soll ich die URL mehrfach kodieren?
? und & der inneren URL als Teil der äußeren URL geparst. Um so einen Wert zu dekodieren, führe das Dekodieren genauso oft aus. Wenn du eine einzelne URL versehentlich doppelt kodiert hast, dekodiere sie zweimal und du bekommst das Original zurück.