URL-Kodierung und -Dekodierung, für Entwickler erklärt
Tippen Sie ein Leerzeichen in eine URL, oder ein kyrillisches Wort, oder ein Und-Zeichen, das zu Ihren Daten gehört und nicht zur Adresse selbst, und irgendetwas muss nachgeben. Das Web garantiert sicheren Transport nur für eine kleine, vorhersehbare Menge an ASCII-Zeichen. Alles andere muss in ein Format verpackt werden, auf das sich Router, Server und Browser gleichermaßen einigen. Dieses Format ist die Prozentkodierung, gemeinhin URL-Kodierung genannt, und auf dieser Seite können Sie Text in beide Richtungen direkt in Ihrem Browser umwandeln.
Was Prozentkodierung tatsächlich ist
Die Regel ist mechanisch und leicht zu befolgen. Jedes Zeichen, das nicht wörtlich auftauchen darf, wird durch ein %-Zeichen ersetzt, gefolgt von zwei Hexadezimalziffern, die den Bytewert dieses Zeichens ausdrücken. Aus einem Leerzeichen wird %20. Aus einem Pluszeichen wird %2B. Aus dem Rautezeichen wird %23. Wenn ein Zeichen mehreren Bytes zugeordnet ist, wie es bei den meisten Nicht-ASCII-Texten unter UTF-8 der Fall ist, erhalten Sie einfach mehrere Tripel hintereinander: Das Euro-Zeichen wird zu %E2%82%AC. Die Dekodierung kehrt den Vorgang um und liest jedes Tripel zurück in sein ursprüngliches Byte.
Diese Konvention ist in der URI-Spezifikation (RFC 3986) definiert und sie ist absichtlich langweilig. Genau das ist der Punkt. Jeder wohlerzogene HTTP-Client und -Server auf dem Planeten setzt dieselben Regeln um, sodass ein Link, der an einer Stelle korrekt kodiert ist, überall sonst unversehrt ankommt.
Warum es existieren muss
URLs transportieren zwei Arten von Zeichen mit sehr unterschiedlichen Aufgaben. Reservierte Zeichen wie /, ?, #, &, = und : sind strukturell. Sie sagen einem Parser, wo der Pfad endet und die Query-Zeichenkette beginnt, oder wo ein Parameter aufhört und der nächste anfängt. Enthalten Ihre eigentlichen Daten eines dieser Symbole, muss es kodiert werden, damit der Parser es nicht für Satzzeichen hält. Eine Bestellreferenz wie A&B/2024, roh in eine Query-Zeichenkette geworfen, würde als zwei Parameter und ein Pfadsegment fehlgedeutet.
Dann gibt es unsichere und Nicht-ASCII-Zeichen: Leerzeichen, Anführungszeichen, spitze Klammern, Buchstaben mit Akzent, Emoji, alles außerhalb des reinen ASCII-Bereichs. Diese haben in einer URL wörtlich nichts verloren, entweder weil sie beim Transport verstümmelt werden oder weil sie keine definierte Darstellung besitzen. Sie zu kodieren hält Links sauber und vorhersehbar, statt das Ergebnis dem Zufall zu überlassen.
Wo es in der echten Arbeit auftaucht
Query-Zeichenketten sind der klassische Fall. Jeder Wert, den Sie an ?key=... anhängen, sollte kodiert werden, damit Nutzereingaben die Struktur nicht zerbrechen können. Dasselbe gilt für HTML-Formularübermittlungen, die als application/x-www-form-urlencoded gesendet werden, wobei der Browser die Feldwerte automatisch kodiert (und aus historischer Konvention Leerzeichen in + statt %20 verwandelt). Sie begegnen ihr auch beim Erstellen von Links, die auf Seiten mit nicht-lateinischen Titeln zeigen, beim manuellen Zusammenbauen von API-Anfragen, beim Übergeben von Weiterleitungszielen als Parameter und beim Debuggen, warum eine Anfrage, die in der Adressleiste in Ordnung aussieht, verstümmelt am Server ankommt.
encodeURI im Vergleich zu encodeURIComponent
JavaScript liefert zwei Encoder, und die Wahl des falschen ist ein häufiger Fehler. Der Unterschied betrifft den Geltungsbereich. encodeURIComponent ist für ein einzelnes Datenstück gedacht, etwa einen Query-Wert. Es kodiert nahezu alles, einschließlich der reservierten Zeichen /, ?, :, @, &, =, + und #. Genau das wollen Sie, wenn die Daten diese Symbole als gewöhnlichen Text enthalten dürfen.
encodeURI ist für eine vollständige Adresse gedacht, die funktionsfähig bleiben soll. Es lässt die strukturellen Zeichen unangetastet, sodass die Schrägstriche, Doppelpunkte und Fragezeichen, die die URL zusammenhalten, erhalten bleiben. Verwenden Sie es, wenn Sie eine vollständige URL haben und nur Leerzeichen oder Nicht-ASCII-Zeichen bereinigen wollen; greifen Sie zu encodeURIComponent, wann immer Sie einen Wert in eine größere URL einfügen. Eine einfache Faustregel: Kodieren Sie den gesamten Link mit encodeURI, kodieren Sie die Teile, die Sie hineinstecken, mit encodeURIComponent.
Alles bleibt auf Ihrem Rechner
Dieses Tool läuft vollständig in Ihrem Browser. Text, den Sie einfügen, wird lokal mit denselben Standardroutinen kodiert oder dekodiert und reist nie zu einem Server, was es sicher macht für Tokens, signierte Parameter oder alles andere, das Sie lieber nicht über die Leitung schicken. Wenn Sie mit anderen Textumwandlungen arbeiten, steht der Base64-Konverter direkt daneben, und Sie können das gesamte Angebot an Entwickler-Tools für weitere alltägliche Helfer durchstöbern.
Häufig gestellte Fragen
Was bedeutet %20 in einer URL?
Es ist ein kodiertes Leerzeichen. Das Leerzeichen ist in einer URL nicht wörtlich erlaubt, daher wird es durch ein Prozentzeichen und den Hexadezimalwert 20 ersetzt, der dem Bytewert eines Leerzeichens entspricht.
Warum sehe ich manchmal ein Pluszeichen statt %20?
HTML-Formulardaten vom Typ application/x-www-form-urlencoded kodieren Leerzeichen aus historischer Konvention als Pluszeichen. In einem normalen Pfad oder einer Query wird ein Leerzeichen als %20 kodiert. Beide werden im jeweils passenden Kontext wieder zu einem Leerzeichen dekodiert.
Wann sollte ich encodeURIComponent statt encodeURI verwenden?
Verwenden Sie encodeURIComponent für einen einzelnen Wert, den Sie in eine URL einfügen, etwa einen Query-Parameter, da es auch reservierte Zeichen kodiert. Verwenden Sie encodeURI für eine vollständige Adresse, wenn Sie die Schrägstriche, Doppelpunkte und Fragezeichen erhalten wollen, die sie zusammenhalten.
Verändert die URL-Kodierung die Bedeutung meiner Daten?
Nein. Die Kodierung ist vollständig umkehrbar. Das Dekodieren des Ergebnisses liefert exakt den ursprünglichen Text zurück, Byte für Byte, solange auf beiden Seiten derselbe Zeichensatz verwendet wird.
Wie werden Nicht-ASCII-Zeichen wie Akzente oder Emoji behandelt?
Sie werden zunächst in UTF-8-Bytes umgewandelt, und dann wird jedes Byte zu seinem eigenen Prozent-Tripel. Ein einzelner Buchstabe mit Akzent oder ein Emoji kann sich daher in der kodierten Ausgabe in mehrere Tripel ausdehnen.
Wird mein Text an einen Server gesendet, wenn ich dieses Tool verwende?
Nein. Kodierung und Dekodierung finden vollständig in Ihrem Browser statt. Nichts, was Sie einfügen, wird hochgeladen, sodass es sicher mit privaten oder sensiblen Zeichenketten verwendet werden kann.