Was ist URL-Encoding? Percent-Encoding erklaert (2026)

Jedes Zeichen in einer Webadresse muss aus einem kleinen, sicheren Zeichensatz stammen, auf den sich Browser, Server, Proxys und Logs einigen. Wenn Sie etwas ausserhalb dieses Satzes in einen Link legen wollen - ein Leerzeichen, ein Ampersand, einen akzentuierten Buchstaben oder ein Emoji - muss es zuerst URL-encoded werden. URL-Encoding, auch Percent-Encoding genannt, ist der Standard, der diese Zeichen durch ein Prozentzeichen gefolgt vom Byte-Wert in Hexadezimal ersetzt, sodass ein Leerzeichen zu %20 und & zu %26 wird. Dieser Guide erklaert, was URL-Encoding ist, welche Zeichen es brauchen, wie das %XX-Format funktioniert und die Wahl encodeURIComponent vs. encodeURI, die die meisten Entwickler stolpern laesst - mit ausgearbeiteten Beispielen zum Kopieren.

Was ist URL-Encoding?

URL-Encoding ist eine Art, Zeichen in einem Uniform Resource Locator (URL) nur mit einem begrenzten, universell sicheren Zeichensatz darzustellen. Der URL-Standard (RFC 3986) erlaubt nur eine Handvoll Zeichen woertlich: die ASCII-Buchstaben A-Z und a-z, die Ziffern 0-9 und wenige Symbole. Alles andere - Leerzeichen, die meiste Zeichensetzung und jedes nicht-englische Zeichen - muss in eine percent-encoded Sequenz umgewandelt werden, bevor es sicher in einem Link reisen kann.

Der Grund: URLs laufen durch viele Systeme, und manche Zeichen tragen fuer diese Systeme eine besondere Bedeutung. Ein Leerzeichen kann stillschweigend wegfallen oder zu einem + werden, ein # startet das Fragment, und ein ? startet den Query-String. Percent-Encoding entfernt die Mehrdeutigkeit, indem jedes problematische Zeichen zu einem Code wird, der bedeutet "das ist Daten, kein Delimiter."

Reserved vs. unreserved Characters

Die URL-Spezifikation teilt Zeichen in Gruppen. Zu wissen, welche welche ist, sagt Ihnen genau, was Encoding braucht und was in Ruhe gelassen werden sollte.

Unreserved Characters (nie encoden)

Diese Zeichen sind ueberall in einer URL immer sicher so zu verwenden und sollten nicht encoded werden:

• Grossbuchstaben: A-Z
• Kleinbuchstaben: a-z
• Ziffern: 0-9
• Vier Symbole: Bindestrich (-), Unterstrich (_), Punkt (.) und Tilde (~)

Reserved Characters (encoden, wenn als Daten genutzt)

Reserved Characters haben in einer URL eine besondere Aufgabe - sie wirken als Delimiter, die einen Teil vom anderen trennen. Sie sind nur sicher, wenn sie genau diese Aufgabe erfuellen. Wenn ein reserved Character innerhalb eines Werts statt als Trenner erscheint, muss er encoded werden, damit er nicht fuer einen Delimiter gehalten wird.

• Path- und Authority-Delimiter: / : @
• Query- und Fragment-Delimiter: ? # & =
• Sub-Delimiter: ! $ & ' ( ) * + , ; =

Zum Beispiel trennt das & in https://example.com/search?q=cats&sort=new zwei Query-Parameter, daher bleibt es literal. Aber wenn Sie nach der Phrase "cats & dogs" suchen, muss das & innerhalb dieses Werts zu %26 werden - sonst liest der Server &dogs als zweiten Parameter.

Das %XX-Format erklaert

Percent-Encoding folgt einer einfachen Regel: ein Prozentzeichen (%) gefolgt von zwei hexadezimalen Ziffern. Diese zwei Ziffern sind der Wert eines einzelnen Bytes in Basis-16 (00 bis FF, also 0-255 dezimal). Um ein Zeichen zu encoden, schlagen Sie seinen Byte-Wert nach und schreiben ihn nach dem %.

• Leerzeichen ist 32 dezimal, das ist 20 hexadezimal - also wird ein Leerzeichen zu %20.
• Das Ampersand & ist 38 dezimal = 26 hex - also wird & zu %26.
• Das Gleichheitszeichen = ist 61 dezimal = 3D hex - also wird = zu %3D.
• Das Fragezeichen ? ist 63 dezimal = 3F hex - also wird ? zu %3F.

Zeichen im ASCII-Bereich (0-127) sind ein einzelnes Byte, daher encoden sie immer zu einer %XX-Sequenz. Zeichen ausserhalb von ASCII werden zuerst in ihre UTF-8-Bytes umgewandelt - das koennen zwei, drei oder vier Bytes sein - und jedes Byte wird zu seinem eigenen %XX. Deshalb encoded der akzentuierte Buchstabe e acute (U+00E9) zu %C3%A9: seine UTF-8-Form sind die zwei Bytes C3 und A9.

encodeURIComponent vs. encodeURI - wann welches nutzen

JavaScript gibt Ihnen zwei eingebaute Funktionen fuer Percent-Encoding, und die falsche zu waehlen ist der haeufigste URL-Encoding-Fehler. Der Unterschied ist, welche reserved Characters sie in Ruhe lassen.

encodeURIComponent - fuer einen einzelnen Wert

encodeURIComponent encoded fast alles, was kein unreserved Character ist, einschliesslich der reserved Delimiter / ? : @ & = + $ #. Nutzen Sie es fuer ein einzelnes Datenstueck, das Sie in eine URL einfuegen - einen Query-Parameter-Wert, ein Path-Segment oder ein Formularfeld. Weil es & und = escaped, zerstoert ein Wert, der sie enthaelt, nicht den umgebenden Query-String.

encodeURI - fuer eine ganze URL

encodeURI ist dafuer gedacht, eine vollstaendige, bereits zusammengesetzte URL zu encoden. Es laesst die reserved Delimiter intakt - :, /, ?, #, & und = bleiben unveraendert - sodass die URL ihre Struktur behaelt. Es encoded nur Zeichen, die nirgendwo gueltig sind, wie Leerzeichen. Nutzen Sie es, wenn Sie eine volle URL haben, die ein illegales Zeichen enthalten kann, und Sie ihre Teile nicht aendern wollen.

Zwei praktische Hinweise: encodeURIComponent escaped die Zeichen ! ' ( ) * nicht, daher muss ein strikter Parser diese ggf. manuell ersetzen. Und encoden Sie nie einen String, der schon encoded ist - das macht jedes % zu %25, sodass %20 zu %2520 wird, ein klassischer Double-Encoding-Bug, der kaputte Links erzeugt.

Ausgearbeitete Beispiele

So sehen haeufige Zeichen vor und nach dem Encoding aus. Jede Zeile liest sich als Zeichen - was es ist - encoded Form.

• Leerzeichen - Worttrenner - %20 (ein + wird in Query-Strings ebenfalls fuer Leerzeichen genutzt; siehe unten)
• & - Ampersand - %26
• = - Gleichheitszeichen - %3D
• ? - Fragezeichen - %3F
• / - Schraegstrich - %2F
• # - Hash / Fragment-Start - %23
• + - Pluszeichen - %2B
• e acute - e mit Accent aigu (Nicht-ASCII, 2 UTF-8-Bytes) - %C3%A9
• Emoji - Emoji (4 UTF-8-Bytes) - %F0%9F%98%80

Einen Wert mit Leerzeichen und Symbolen encoden

Angenommen, Sie wollen die Suchphrase "cats & dogs = fun" als einzelnen Query-Wert uebergeben. encodeURIComponent darauf ergibt cats%20%26%20dogs%20%3D%20fun. Jedes Leerzeichen, das & und das = sind escaped, sodass das Ganze als ein Wert behandelt wird statt als drei separate Parameter.

Ein vollstaendiges Query-String-Beispiel

Alles zusammen: stellen Sie sich eine Suchseite vor, die eine Query und eine Kategorie annimmt. Sie encoden jeden Wert separat und bauen dann die URL:

• Roher Query-Wert: cats & dogs
• Roher Kategorie-Wert: pets/animals
• Encoded Query: cats%20%26%20dogs
• Encoded Kategorie: pets%2Fanimals
• Finale URL: https://example.com/search?q=cats%20%26%20dogs&category=pets%2Fanimals

Beachten Sie, dass das & und = zwischen q=... und category=... literal bleiben, weil sie ihre Aufgabe als Delimiter erfuellen, waehrend das & im Query-Wert und das / im Kategorie-Wert encoded werden, weil sie Daten sind. Genau das liefert Encoding jedes Werts mit encodeURIComponent und anschliessendes Zusammenfuegen der Teile.

Haeufig gestellte Fragen

Was ist URL-Encoding in einfachen Worten?

URL-Encoding ist eine Art, Sonderzeichen sicher in eine Webadresse aufzunehmen, indem man sie durch ein % und einen zweistelligen Code ersetzt. Weil URLs nur einen begrenzten Zeichensatz enthalten duerfen, wird alles andere - wie ein Leerzeichen, ein Ampersand oder ein akzentuierter Buchstabe - in sein percent-encoded Aequivalent umgewandelt (ein Leerzeichen wird %20), damit der Link gueltig bleibt.

Warum stehen in URLs %20?

%20 ist die percent-encoded Form eines Leerzeichens. Leerzeichen sind in einer URL nicht erlaubt; wenn ein Link eines enthaelt - oft aus einem Dateinamen oder einem Suchbegriff - wird es durch %20 ersetzt. Beim Laden der Seite decoded der Server oder Browser %20 wieder zu einem Leerzeichen.

Was ist der Unterschied zwischen encodeURI und encodeURIComponent?

encodeURIComponent encoded einen einzelnen Wert und escaped die reserved Delimiter (& = ? / #), daher passt es fuer einen Query-Parameter oder ein Path-Segment. encodeURI encoded eine ganze URL und laesst diese Delimiter intakt, damit die Adresse ihre Struktur behaelt. Nutzen Sie encodeURIComponent fuer die Teile und encodeURI fuer eine komplette URL.

Welche Zeichen muessen URL-encoded werden?

Nur die unreserved Characters - A-Z, a-z, 0-9 und - _ . ~ - sind immer sicher. Alles andere sollte encoded werden, wenn es innerhalb eines Werts erscheint: Leerzeichen, die meiste Zeichensetzung, die reserved Delimiter (/ ? : @ & = + $ , ; # ! ' ( ) *), und alle Nicht-ASCII-Zeichen wie akzentuierte Buchstaben und Emoji.

Ist URL-Encoding dasselbe wie Verschluesselung oder Base64?

Nein. URL-Encoding ist keine Verschluesselung und bietet keine Sicherheit - es ist eine vollstaendig umkehrbare Texttransformation, die Zeichen nur sicher fuer den Transport in einer URL macht, und jeder kann sie sofort decoden. Es unterscheidet sich auch von Base64, das Binaerdaten in ein 64-Zeichen-Alphabet fuer einen anderen Zweck umcodiert.

Wie decode ich einen URL-encoded String?

Kehren Sie den Prozess um: jede %XX-Sequenz wird zum Byte zurueckgewandelt, das sie darstellt, und aufeinanderfolgende Bytes werden als UTF-8 gelesen, um Zeichen wie e acute oder Emoji wiederherzustellen. In JavaScript macht das decodeURIComponent; ein URL-Decoder-Tool macht dasselbe in Ihrem Browser und zeigt einen klaren Fehler, wenn die Eingabe eine fehlerhafte Sequenz wie ein einzelnes % hat.