URL-Encoding und Query-Strings: Ein praktischer Leitfaden

URLs erlauben in Pfad und Query nur eine begrenzte Zeichenmenge. Alles andere muss percent-encodiert werden (z. B. Leerzeichen → %20, & → %26). Fehler dabei führen zu 404-Fehlern, defekten Analytics-Tags und schwer auffindbaren API-Bugs.

Was wird encodiert?

• Query-Werte, die Leerzeichen, &, =, # oder Nicht-ASCII-Zeichen (Emojis, Akzente) enthalten, müssen encodiert werden.
• Pfadsegmente mit Schrägstrichen oder Sonderzeichen benötigen ebenfalls Encoding – sonst interpretiert der Router die Segmentgrenzen falsch.

Browser zeigen in der Adressleiste oft eine „hübsche" URL an, während sie intern eine encodierte Form übertragen. APIs hingegen erwarten, dass du beim manuellen Zusammensetzen von Strings explizit encodierst.

encodeURIComponent vs. encodeURI

In JavaScript:

• encodeURIComponent – Verwende es für Query-Parameter-Werte (und in der Regel auch für Keys). Es encodiert nahezu alles, was eine URL beschädigen könnte.
• encodeURI – Verwende es nur für eine vollständige URL, wenn du Trennzeichen wie ? und # erhalten möchtest. Im alltäglichen API-Einsatz selten nötig.

const q = "hello world & friends";
const params = new URLSearchParams({ q });
console.log(params.toString()); // q=hello+world+%26+friends

URLSearchParams übernimmt das Encoding für Queries im application/x-www-form-urlencoded-Format und ist der manuellen String-Verkettung vorzuziehen.

URLs mit vielen Parametern aufbauen

Wenn du UTM-Tags, Filter oder API-Keys hinzufügst, schleichen sich leicht Fehler ein: doppelte ?, nicht-encodierte & oder unklare Reihenfolgen. Ein kleines Hilfsmittel – oder ein visueller Builder – hält den finalen String valide.

Probiere unser Tool URL Encode / Decode aus, um zu sehen, wie sich Strings verändern, und den URL & Query String Builder, um einen vollständigen Link mit UTF-8-sicherem Encoding zusammenzusetzen.

cURL und fetch

Wenn du Anfragen aus den Browser-Devtools kopierst, achte auf bereits encodierte Query-Strings. Beim Einfügen in Code werden Werte manchmal doppelt encodiert. Unser cURL to fetch()-Konverter hilft dir, ein funktionierendes cURL in JavaScript umzuwandeln, während du die URL separat prüfst.

Wenn ein Link „in Chrome funktioniert", aber in deinem Skript fehlschlägt, vergleiche den rohen Query-String Byte für Byte.

Kurze Checkliste

• Werte encodieren, bevor sie in ?a=...&b=... eingefügt werden
• URL + URLSearchParams dem manuellen String-Aufbau vorziehen
• Bei internationalisierten Domainnamen (IDN) übernimmt der Browser das Punycode-Encoding im Hostnamen – konzentriere dich beim Encoding auf Pfad und Query