URL Encoder und Decoder in einem Textfeld
Im Server-Log steht q=k%C3%A4se+und+brot, und du musst wissen, wonach der Kunde gesucht hat. Ein URL Decoder beantwortet das mit einem Klick. Der Encoder geht den umgekehrten Weg: Er schreibt Leerzeichen, Umlaute und Sonderzeichen als Prozent-Codes, etwa %20 für ein Leerzeichen oder %C3%BC für „ü“.
Im Feld steht zu Beginn eine Beispiel-Suchanfrage. Drücke einen Button und sieh zu, wie sich der Text ändert.
Was mit eingefügten Links passiert
Kodieren, Dekodieren und Tabelle laufen lokal. Ein Klick sendet keine Anfrage, im Netzwerk-Tab der Entwicklertools siehst du das selbst. Nur der Kopier-Button schreibt in die Zwischenablage.
Ein Redirect, ein Log, ein Tracking-Link
Ein OAuth-Login-Link trägt seine Rücksprung-Adresse im Wert redirect_uri. Fügst du diese innere Adresse unkodiert ein, zerschneidet das erste & den Parameter. Kodiere sie deshalb zuerst mit encodeURIComponent und hänge sie danach an den äußeren Link.
Bei einem Newsletter-Link mit zwölf utm_-Parametern hilft die Tabelle. In einer Zeile liest das niemand, in zwei Spalten geht es schnell. So findest du auch den Parameter, der doppelt vorkommt.
Welcher Button für welchen Fall
- Füge eine URL, einen Query-String oder beliebigen Text ein.
- encodeURIComponent kodiert einen einzelnen Wert und maskiert dabei auch
/ ? : @ & = + $ # ,. - encodeURI (Ganze URL) lässt diese Zeichen stehen. Verwende den Button für eine komplette Adresse, die danach noch funktionieren soll.
- decodeURI macht aus Prozent-Codes wieder Text.
- „Aktuelle URL kopieren“ kopiert den Inhalt des Feldes, „Löschen“ leert es.
Stolpersteine beim Dekodieren
Der Decoder ersetzt zuerst jedes + durch ein Leerzeichen und löst danach die %XX-Codes auf. Ein echtes Plus im Pfad wird darum zum Leerzeichen, %2B bleibt ein Plus.
Steht irgendwo ein % ohne zwei Hex-Ziffern dahinter, scheitert das Dekodieren. Das Feld behält dann seinen Text, eine Fehlermeldung erscheint nicht. Kodierst du zweimal, wird aus %20 ein %2520. Und wer eine ganze URL dekodiert, löst auch %26 und %3D auf, wodurch sich der Aufbau der Query ändern kann.
Was die Tabelle liest und was sie auslässt
Die Tabelle versteht Adressen mit http:// oder https:// am Anfang. Alles andere gilt als Query-String, mit oder ohne ?. Ein Fragment nach # fehlt in der Liste, doppelte Keys bekommen je eine Zeile. Die Werte erscheinen dekodiert. Die Tabelle ist nur zum Lesen.
Häufig gestellte Fragen (FAQ)
encodeURI lässt Zeichen wie :/?#&= stehen, damit eine ganze URL funktioniert. encodeURIComponent maskiert sie, was du für einen einzelnen Parameterwert brauchst.