URL-Kodierer & -Dekodierer mit integriertem URL-Parser

Was ist URL-Kodierung?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Hauptfunktionen

Beispiele

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Anleitung

1. 1

   URL oder kodierten String eingeben

   Fügen Sie eine URL im dekodierten Bereich ein, um sie zu kodieren, oder fügen Sie eine prozentkodierte Zeichenkette im kodierten Bereich ein, um sie zu dekodieren. Wählen Sie je nach Anwendungsfall den Modus encodeURI oder encodeURIComponent.

2. 2

   Ergebnisse und geparste Struktur anzeigen

   Der andere Bereich aktualisiert sich sofort beim Tippen. Der URL-Parser zerlegt die URL in Protokoll, Host, Port, Pfad, Query-Parameter und Fragment — alles bearbeitbar.

3. 3

   Kopieren oder neu erstellen

   Klicken Sie auf „Kopieren“, um das kodierte oder dekodierte Ergebnis zu kopieren. Bearbeiten Sie einzelne URL-Komponenten und klicken Sie auf „Neu erstellen“, um eine neue URL aus den geänderten Teilen zusammenzusetzen.

Häufige Fehler

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Häufige Anwendungsfälle

Verstümmelte URLs debuggen

Prozentkodierte URLs aus Server-Logs, Fehlermeldungen oder Browser-Entwicklertools dekodieren, um den ursprünglichen, lesbaren Text zu sehen.

API-Entwicklung

Query-Parameter-Werte für REST-API-Aufrufe kodieren und sicherstellen, dass Sonderzeichen wie &, = und Leerzeichen die Anfrage-URL nicht beschädigen.

OAuth-Flow-Einrichtung

redirect_uri und andere URL-Parameter in OAuth-Autorisierungs-URLs korrekt kodieren, um Authentifizierungsfehler zu vermeiden.

Internationalisierte URLs

URLs mit chinesischen, japanischen, koreanischen, arabischen oder anderen Nicht-ASCII-Zeichen für internationalisierte Webanwendungen kodieren und dekodieren.

Marketing-Link-Analyse

Tracking-URLs aus E-Mail-Kampagnen und Werbeplattformen dekodieren, um die eingebetteten UTM-Parameter und Weiterleitungsketten zu verstehen.

URL-Struktur untersuchen

Komplexe URLs in ihre Bestandteile zerlegen — Protokoll, Host, Port, Pfad, Query-Parameter und Fragment — zur Analyse und Bearbeitung.

Technische Details

RFC 3986 — Reservierte und nicht reservierte Zeichen

RFC 3986 definiert nicht reservierte Zeichen (A-Z, a-z, 0-9, -, ., _, ~), die niemals kodiert werden müssen, sowie reservierte Zeichen (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =), die als URI-Trennzeichen dienen und prozentkodiert werden müssen, wenn sie als Daten verwendet werden.

UTF-8-Byte-Kodierungsablauf

Nicht-ASCII-Zeichen werden zunächst in ihren Unicode-Codepunkt umgewandelt, dann als UTF-8-Bytes kodiert (1-4 Bytes je nach Codepunkt-Bereich) und schließlich wird jedes Byte als %XX prozentkodiert. Beispiel: é (U+00E9) → UTF-8-Bytes C3 A9 → %C3%A9. Das Emoji 🎉 (U+1F389) → UTF-8-Bytes F0 9F 8E 89 → %F0%9F%8E%89.

URL vs. URI — Begriffsklärung

Eine URI (Uniform Resource Identifier) ist der allgemeine Begriff für jede Bezeichnerzeichenkette. Eine URL (Uniform Resource Locator) ist eine URI, die zusätzlich den Zugriffsmechanismus angibt (wie https://). Die Kodierungsregeln in RFC 3986 gelten für alle URIs. Die JavaScript-API verwendet die URI-Terminologie (encodeURI, decodeURI), während im Alltag der Begriff URL bevorzugt wird.

Best Practices

Den richtigen Modus verwenden

Verwenden Sie encodeURIComponent() für einzelne Query-Parameter-Schlüssel und -Werte. Verwenden Sie encodeURI() nur, wenn Sie eine vollständige URL haben und unsichere Zeichen kodieren möchten, ohne die Struktur zu zerstören. Verwenden Sie encodeURI() niemals für Parameterwerte, die &, = oder andere reservierte Zeichen enthalten können.

Doppelte Kodierung vermeiden

Prüfen Sie vor dem Kodieren einer Zeichenkette, ob sie bereits kodiert ist. Suchen Sie nach vorhandenen %-Sequenzen. Die Kodierung einer bereits kodierten Zeichenkette macht aus %20 → %2520, aus %3D → %253D usw. Wenn Sie unsicher sind, dekodieren Sie zuerst und kodieren Sie dann einmal.

Serverseitig dekodieren

Die meisten Web-Frameworks dekodieren URL-Parameter automatisch, bevor Ihr Anwendungscode sie sieht. Vermeiden Sie die manuelle Dekodierung von Parametern, die Ihr Framework bereits dekodiert hat — dies kann Probleme verursachen, wenn der ursprüngliche Wert buchstäbliche Prozentsequenzen enthielt.

Werte für OAuth und API-Signierung kodieren

OAuth 1.0 Signatur-Basis-Strings und viele API-Signierungsalgorithmen erfordern strikte RFC-3986-Prozentkodierung. Verwenden Sie encodeURIComponent() und ersetzen Sie dann verbleibende Zeichen, die nicht kodiert werden (wie !, ', (, ), *), durch ihre prozentkodierten Entsprechungen, wenn die Spezifikation dies erfordert.

Häufig gestellte Fragen