MT
My Toolbox

URL-Encoder und Decoder: Sonderzeichen in URLs codieren

URL mit Sonderzeichen einfügen und sofort die prozentcodierte Version erhalten, oder einen %20%3F-String zurück in lesbaren Text decodieren. Verwendet dasselbe encodeURIComponent/decodeURIComponent wie Browser intern. Alles läuft lokal; nichts erreicht einen Server.

Operation Mode
tools.urlEncoder.inputText
tools.urlEncoder.enterTextToEncode
tools.urlEncoder.encodedOutput
tools.urlEncoder.encodedOutput
Kodieren und dekodieren Sie URL-Zeichenfolgen

URL Encoding converts special characters into a format that can be transmitted over the internet.

For example, spaces become %20, and other special characters like &, =, and ? are also encoded.

This tool uses encodeURIComponent() anddecodeURIComponent() functions, which encode all characters except:

  • Alphabetic characters (A-Z, a-z)
  • Digits (0-9)
  • Special characters: - _ . ! ~ * ' ( )

Wie URL-Codierung funktioniert (RFC 3986)

URLs können nur einen begrenzten Satz von ASCII-Zeichen enthalten. Alles außerhalb (Leerzeichen, Unicode, reservierte Trennzeichen als Daten verwendet) muss "prozentcodiert" werden: ein % gefolgt von zwei Hex-Ziffern, die den Byte-Wert darstellen. Ein Leerzeichen wird zu %20, ein Schrägstrich in einem Query-Wert wird zu %2F, und das deutsche ü wird zu %C3%BC (zwei UTF-8-Bytes).

Das ist nicht optional. Wenn du ein rohes & in einen Parameterwert steckst, interpretiert der Server es als Parameter-Trennzeichen, nicht als Daten. Ich habe dieses Problem mindestens ein Dutzend Mal debuggt: eine API gibt "fehlender Parameter" zurück, weil jemand vergessen hat, das & in einem Firmennamen wie "Schmidt & Söhne" zu codieren.

Die Spezifikation (RFC 3986, Abschnitt 2.1) definiert "nicht-reservierte Zeichen", die nie codiert werden müssen: A-Z, a-z, 0-9 und - _ . ~. Alles andere ist entweder reserviert (hat spezielle Bedeutung in URLs) oder muss codiert werden. Der knifflige Teil: ob du reservierte Zeichen codierst, hängt vom Kontext ab. Ein / im Pfad ist ein Trennzeichen, aber ein / innerhalb eines Query-Parameter-Werts ist Daten und muss als %2F codiert werden.

Anleitung

  1. Codieren- oder Decodieren-Modus wählen.
  2. Text einfügen oder eingeben: eine vollständige URL, einen Query-Parameter-Wert oder einen bereits codierten String.
  3. Das Ergebnis aktualisiert sich während der Eingabe. Mit einem Klick kopieren.
  4. Beim Codieren: nur den Wert-Teil einfügen (nicht die ganze URL), um Doppelcodierung der Struktur zu vermeiden.

Wann du das brauchst

Query-Strings mit Benutzereingaben erstellen

Benutzer sucht nach "Schuhe & Taschen". Wenn du das & nicht codierst, teilt der Server es in zwei Parameter. encodeURIComponent("Schuhe & Taschen") gibt dir einen sicheren codierten String für ?q=.

OAuth und Redirect-URLs debuggen

OAuth-Flows übergeben redirect_uri als Query-Parameter. Diese URI enthält selbst ? und &. Du musst die gesamte Redirect-URL codieren, damit sie sicher als einzelner Parameterwert transportiert wird. Doppelcodierungs-Bugs hier verursachen "invalid redirect_uri"-Fehler, die schwer zu finden sind.

Tracking-Links und UTM-Parameter decodieren

Marketing-Tools generieren URLs mit codierten UTM-Parametern, die unlesbar sind. Die vollständige URL hier einfügen, um zu sehen, was utm_campaign, utm_source und utm_content tatsächlich sagen.

JSON oder spezielle Daten in URL-Parametern übergeben

Manche APIs akzeptieren JSON in Query-Strings (schlechte Praxis, aber es existiert). Die Zeichen { } " brauchen alle Codierung. Hier siehst du genau, wie die codierte Version aussieht, bevor du sie hardcodest.

Häufige Fehler vermeiden

1.

Nicht die gesamte URL codieren, nur die Werte

encodeURIComponent("https://example.com/path?q=hello") codiert auch :// und ?, was die URL-Struktur zerstört. Codiere einzelne Parameterwerte. Verwende encodeURI() nur wenn du eine vollständige URL codieren willst und die Struktur erhalten möchtest.

2.

Vorsicht vor Doppelcodierung

Wenn ein Wert bereits codiert ist (%20), wird bei erneuter Codierung %20 zu %2520 (das % wird zu %25 codiert). Das ist der häufigste Bug in URL-Handling-Code. Immer prüfen, ob dein Framework bereits codiert, bevor du eine weitere Schicht hinzufügst.

3.

+ vs %20 für Leerzeichen

In Query-Strings (application/x-www-form-urlencoded) bedeutet + Leerzeichen. In Pfad-Segmenten ist nur %20 gültig. JavaScripts encodeURIComponent verwendet immer %20. Wenn du beim Decodieren + siehst, musst du sie möglicherweise erst durch Leerzeichen ersetzen. decodeURIComponent macht das nicht automatisch.

4.

UTF-8-Codierung passiert vor der Prozentcodierung

Das Zeichen ü wird zuerst als UTF-8-Bytes codiert (0xC3 0xBC), dann wird jedes Byte prozentcodiert (%C3%BC). Wenn dein System Latin-1 statt UTF-8 verwendet, bekommst du %FC statt %C3%BC. Diese Diskrepanz verursacht Zeichensalat. Immer UTF-8 verwenden.

Beispiele

Suchanfrage mit Sonderzeichen codieren

Ein Benutzer sucht nach "C++ tutorials & guides". Alle drei Sonderzeichen brauchen Codierung.

Input

C++ tutorials & guides

Output

C%2B%2B%20tutorials%20%26%20guides

Tracking-URL-Parameter decodieren

Eine Marketing-URL enthält einen codierten Redirect. Decodiere ihn, um zu sehen wohin er führt.

Input

https%3A%2F%2Fexample.com%2Flanding%3Futm_source%3Dnewsletter%26utm_campaign%3Dspring

Output

https://example.com/landing?utm_source=newsletter&utm_campaign=spring

Funktionen

  • Codieren und Decodieren mit sofortigem Wechsel
  • Standard encodeURIComponent/decodeURIComponent, wie es dein Browser intern nutzt
  • Unicode, Emoji und Multi-Byte-Zeichen werden korrekt verarbeitet
  • Ergebnisse erscheinen während der Eingabe, kein Absende-Button nötig
  • Ein-Klick-Kopie in die Zwischenablage
  • Läuft 100% im Browser. Null Netzwerkanfragen, keine Datenerfassung.

Häufige Fragen

Was ist der Unterschied zwischen encodeURI() und encodeURIComponent()?

encodeURI() ist zum Codieren einer vollständigen URL. Es lässt :, /, ?, # und & unberührt, weil sie strukturell sind. encodeURIComponent() codiert alles außer A-Z, 0-9 und - _ . ! ~ * '( ). In der Praxis willst du fast immer encodeURIComponent(), weil du einen Wert codierst, um ihn in eine URL einzusetzen, nicht die URL selbst.

Warum bricht meine URL, wenn ich & oder = in einem Parameterwert habe?

Weil & Parameter trennt und = Schlüssel von Wert trennt in Query-Strings. Wenn dein Wert diese Zeichen wörtlich enthält, teilt der Parser dort. Codiere den Wert: "Tom & Jerry" wird zu "Tom%20%26%20Jerry". Jetzt sieht der Parser einen Parameter mit einem codierten Ampersand, nicht zwei separate Parameter.

Soll ich %20 oder + für Leerzeichen verwenden?

Kommt auf den Kontext an. Im Query-String von application/x-www-form-urlencoded (HTML-Formulare) bedeutet + Leerzeichen. In URL-Pfad-Segmenten ist nur %20 gültig. JavaScripts encodeURIComponent() erzeugt immer %20. Die meisten Server akzeptieren beides in Query-Strings, aber für Pfad-Segmente nimm %20.

Wie werden Unicode-Zeichen wie Emoji oder Umlaute codiert?

Das Zeichen wird zuerst in UTF-8-Bytes konvertiert, dann wird jedes Byte prozentcodiert. Das Emoji 🎉 sind 4 UTF-8-Bytes: F0 9F 8E 89, wird also zu %F0%9F%8E%89. Das ü sind 2 Bytes: C3 BC wird zu %C3%BC. Dieses Tool erledigt das automatisch.

Was verursacht Doppelcodierung und wie behebe ich sie?

Doppelcodierung passiert, wenn du einen bereits codierten String nochmal codierst. %20 wird zu %2520, weil das % zu %25 codiert wird. Häufige Ursache: dein Framework codiert automatisch, und du rufst zusätzlich encodeURIComponent() auf. Lösung: erst decodieren (um den Rohwert zu bekommen), dann einmal codieren. Oder prüfe ob deine HTTP-Bibliothek die Codierung bereits handhabt (axios, fetch mit URLSearchParams, etc. tun es).

Tipps und verwandte Workflows