URL-Encoder & 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 im Browser; nichts erreicht einen Server.
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
- Codieren- oder Decodieren-Modus wählen.
- Text einfügen oder eingeben — eine vollständige URL, einen Query-Parameter-Wert oder einen bereits codierten String.
- Das Ergebnis aktualisiert sich während der Eingabe. Mit einem Klick kopieren.
- 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, ohne %20 und %3D manuell zu parsen.
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. Dieses Tool zeigt dir genau, wie die codierte Version aussieht, bevor du sie hardcodest.
Häufige Fehler Vermeiden
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 dabei die Struktur erhalten möchtest.
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 #1-Bug den ich in URL-Handling-Code sehe. Immer prüfen, ob dein Framework bereits codiert, bevor du eine weitere Schicht hinzufügst.
+ vs %20 für Leerzeichen — kenne den Unterschied
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.
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 — ein Byte statt zwei. 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 & guidesOutput
C%2B%2B%20tutorials%20%26%20guidesTracking-URL-Parameter decodieren
Eine Marketing-URL enthält einen codierten Redirect — decodiere ihn, um zu sehen, wohin er tatsächlich führt.
Input
https%3A%2F%2Fexample.com%2Flanding%3Futm_source%3Dnewsletter%26utm_campaign%3DspringOutput
https://example.com/landing?utm_source=newsletter&utm_campaign=springFunktionen
- Codieren- und Decodieren-Modi mit sofortigem Wechsel
- Verwendet Standard encodeURIComponent/decodeURIComponent — wie Browser
- Verarbeitet Unicode, Emoji und Multi-Byte-Zeichen korrekt
- Zeigt Ergebnisse 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äufig Gestellte 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 wenn du Pfad-Segmente baust, 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 → %C3%BC. Dieses Tool erledigt alles automatisch — einfach einfügen und es funktioniert.
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 (die meisten tun es — axios, fetch mit URLSearchParams, etc.).
Tipps und verwandte Workflows
- Müssen Sie stattdessen Binärdaten kodieren? Nutzen Sie unseren Base64-Encoder.
- Formatieren Sie JSON-Daten, bevor Sie sie URL-kodieren, mit unserem JSON-Formatierer.
- Erstellen Sie einen QR-Code für Ihre kodierte URL mit unserem QR-Code-Generator.
- Hashen Sie Ihre URL für Cache-Invalidierung mit unserem Hash-Generator.