Zum Inhalt springen
Dogu SangjaWerkzeugkastenAlle Tools

URL-Encoder & -DecoderBeta

Kodiere und dekodiere URLs und Query-Strings. Vergleiche encodeURIComponent und encodeURI per Beispiel und analysiere die Struktur einer vollständigen URL.

Richtung
0 Zeichen · 0 Zeilen
Kodierungsart
encodeURIComponent maskiert wirklich alles, auch URL-Trennzeichen wie /, ?, & und #. Verwende es für den Wert eines einzelnen Query-Parameters. encodeURI lässt diese Trennzeichen unverändert und maskiert nur den Rest – dafür ist es für eine komplette URL gedacht. Beispiel: „a b/c?d“ → component ergibt „a%20b%2Fc%3Fd“, full ergibt „a%20b/c?d“.

0 Zeichen · 0 Zeilen

URL-Struktur analysieren

URL-Struktur analysieren

Gib eine vollständige URL ein, um sie in Protokoll, Host, Pfad und Query-Parameter aufgeteilt zu sehen.

https://example.com/path?query=1&lang=de

So funktioniert’s

Auf dem Encode-Tab gibst du Text oder ein Stück einer URL ein, und das Ergebnis wird darunter angezeigt. Auf dem Decode-Tab fügst du eine kodierte Zeichenkette wie %C3%A4 ein, und sie wird wieder in die ursprünglichen Zeichen umgewandelt. Das Ergebnis aktualisiert sich beim Tippen, und du kannst es daneben kopieren.

encodeURIComponent vs. encodeURI

Beide Funktionen wandeln Zeichen, die in einer URL nicht sicher sind, in prozent-kodierte Sequenzen um (ein % gefolgt von einem Hex-Code) – sie maskieren aber unterschiedlich viel.

  • encodeURIComponent (ein Wert): maskiert wirklich alles, auch Zeichen, die als URL-Trennzeichen dienen, wie /, ?, &, #, : und @. Verwende es, um ein einzelnes Stück einer URL zu bauen, etwa den Wert eines einzelnen Query-Parameters. Um zum Beispiel den Suchbegriff a/b&c als Query-Wert einzusetzen, musst du ihn als a%2Fb%26c kodieren, damit das & nicht als Beginn des nächsten Parameters missverstanden wird.
  • encodeURI (ganze URL): gedacht für eine vollständige URL, die bereits ihre Struktur hat, mit /, ?, &, # und so weiter. Es lässt diese Trennzeichen unverändert und maskiert nur den Rest, etwa Leerzeichen oder Nicht-ASCII-Zeichen. Würde man encodeURIComponent auf eine ganze URL anwenden, würden auch das / und ? maskiert, die die Struktur der URL ausmachen – die URL wäre kaputt.

Zum Beispiel liefern die beiden Varianten für a b/c?d unterschiedliche Ergebnisse: component ergibt a%20b%2Fc%3Fd, full ergibt a%20b/c?d. Die Wahl hängt davon ab, ob du gerade ein einzelnes Stück einer URL oder eine vollständige URL baust.

„+ als Leerzeichen“ (application/x-www-form-urlencoded)

Werte, die ein HTML-<form> per GET oder POST sendet, verwenden das Format application/x-www-form-urlencoded, das üblicherweise Leerzeichen als + statt als %20 kodiert. Aktivierst du „+ als Leerzeichen“, wird beim Kodieren + statt %20 verwendet, und beim Dekodieren wird + als Leerzeichen interpretiert. Aktiviere die Option nur, wenn du mit Formulardaten oder einem application/x-www-form-urlencoded-Request-Body arbeitest, und lass sie für einen gewöhnlichen URL-Pfad oder Dateinamen ausgeschaltet. Ist die Option aus, wird + als normales Zeichen behandelt.

URL-Struktur analysieren

Füge eine vollständige URL (inklusive Protokoll wie https://) in das Analysefeld ein, und sie wird in Protokoll, Host, Pfad, Hash und eine Tabelle der Query-Parameter zerlegt. Query-Werte werden automatisch prozent-dekodiert, sodass ein kodierter Query-String wie ?q=hallo%20welt lesbar wird. Taucht derselbe Schlüssel mehrfach auf (?tag=a&tag=b), wird jedes Vorkommen als eigene Zeile angezeigt.

Häufige Fehler

Nach jedem % müssen zwei Hex-Ziffern folgen (wie bei %20). Ein einzelnes %, ein % gefolgt von nicht-hexadezimalen Zeichen (%zz) oder eine kaputte %XX-Sequenz für ein Mehrbyte-Zeichen zeigen einen Dekodierungsfehler an. Auch das Dekodieren mit einem anderen Typ (component/full) als dem, mit dem kodiert wurde, kann die Bedeutung verändern – achte darauf, denselben Typ zu wählen.

Datenschutz

Alles, was du eingibst, wird ausschließlich in diesem Browser verarbeitet und nie an einen Server gesendet. Beim Schließen der Seite ist alles wieder weg.

Quellen

Häufige Fragen

Wann verwende ich encodeURIComponent statt encodeURI?

encodeURIComponent maskiert wirklich alles, auch URL-Trennzeichen wie /, ?, & und #. Verwende es, um ein einzelnes Stück einer URL zu bauen, etwa den Wert eines Query-Parameters. encodeURI lässt diese Trennzeichen unverändert und maskiert nur den Rest – dafür ist es für eine bereits vollständig strukturierte URL gedacht. encodeURI auf einen Query-Wert anzuwenden ist riskant, weil ein & oder = im Wert als Trennzeichen missverstanden werden könnte.

Warum bekomme ich beim Dekodieren die Fehlermeldung „Prozent-Kodierung ist nicht gültig“?

Eine Prozent-Kodierung muss im Format %XX vorliegen, wobei XX zwei hexadezimale Ziffern sind. Ein einzelnes %, ein % gefolgt von nicht-hexadezimalen Zeichen oder eine kaputte %XX%XX-Sequenz für ein Mehrbyte-Zeichen lassen sich nicht in das ursprüngliche Zeichen zurückverwandeln, deshalb erscheint dieser Fehler.

Wann sollte ich „+ als Leerzeichen“ aktivieren?

Wenn ein HTML-Formular Werte per GET oder POST sendet (application/x-www-form-urlencoded), werden Leerzeichen üblicherweise als + statt als %20 kodiert. Aktiviere diese Option, wenn du mit dem Query-String oder dem Request-Body eines Formulars arbeitest, damit + korrekt als Leerzeichen gelesen wird. Lass sie für einen gewöhnlichen URL-Pfad ausgeschaltet.

Was zeigt mir der URL-Struktur-Analysator?

Füge eine vollständige URL ein, die mit https:// beginnt, und du siehst Protokoll, Host (Domain und Port), Pfad, Hash (nach #) sowie die Query-Parameter als Tabelle mit Schlüssel und Wert. Werte werden automatisch prozent-dekodiert, sodass ein kodierter Query-String lesbar wird.