Klartext

Prozentcodiert

Was ist der URL-Encoder?

Wirf einen String in den linken Bereich, und der rechte zeigt die prozentcodierte Variante. Im Hintergrund läuft encodeURIComponent, das jedes Zeichen escaped, das in einer URL eine Sonderbedeutung hat — Leerzeichen werden zu %20, kaufmännische Und werden zu %26, das At-Zeichen wird zu %40 und so weiter. Genau diese Codierung brauchst du für die WERTE von Query-Parametern, für Pfadsegmente und überall, wo ein roher String innerhalb einer URL mitfahren soll, ohne sie zu zerschießen.

Es gibt zwei Codierungs-Varianten, und der Unterschied ist wichtig. encodeURIComponent (diese Seite) escaped alles Sonderbare, einschließlich ?, #, &, = und / — denn auf Werteebene würden diese Zeichen die Bedeutung der URL verändern. encodeURI ist großzügiger und lässt diese strukturellen Zeichen in Ruhe, weil es davon ausgeht, dass du eine bereits zusammengesetzte URL als Ganzes codierst. Bei MDN findest du die Tabelle der reservierten Zeichen, falls du es ganz genau brauchst. Wenn du eine komplette URL aus Einzelteilen baust, willst du den URL Builder, nicht diese Seite.

Die eigentliche Codierungsregel kommt aus RFC 3986 §2.1: Jedes unsichere Byte wird als % gefolgt von zwei Hex-Ziffern seiner UTF-8-Bytes geschrieben. Deshalb ergibt ein Emoji wie eine Rakete vier Prozent-Tripel (es sind vier UTF-8-Bytes), während ein ASCII-Zeichen wie ! nur eines bleibt. Der WHATWG URL-Standard formalisiert, wie moderne Browser das umsetzen, und der Wikipedia-Artikel zum URL-Encoding hat eine saubere Referenztabelle, falls du etwas von Hand gegenchecken willst. Alles passiert in deinem Browser. Nichts wird hochgeladen, nichts geloggt.

So benutzt du den URL-Encoder

Drei Schritte. Die Seite aktualisiert sich beim Tippen — kein Konvertieren-Button.

Füge deinen String ein oder klick auf Beispiel

Tippe oder füge beliebigen Text in den linken Bereich ein. Klick auf Beispiel, um einen String mit den Zeichen zu laden, die einem in der Praxis tatsächlich begegnen — Leerzeichen, Und-Zeichen, eine E-Mail, ein Prozentzeichen. Beispieleingabe:

Ava Chen & friends? [email protected]  100% off!

Unicode und Emojis funktionieren problemlos — der Encoder verwendet UTF-8-Byte-Sequenzen, also wird ein japanischer Name oder ein Emoji zu einer Multibyte-Prozent-Sequenz und macht den Hin- und Rückweg sauber durch jeden standardkonformen Decoder.

Lies die codierte Ausgabe

Der rechte Bereich zeigt die prozentcodierte Variante. Leerzeichen werden zu %20, & wird zu %26, ? wird zu %3F, @ wird zu %40, und % selbst wird zu %25. Aktualisiert sich beim Tippen.

Kopieren oder herunterladen

Klick auf Kopieren, um den codierten String in die Zwischenablage zu legen, oder auf Herunterladen, um ihn als .txt-Datei zu speichern. Mit Leeren im Eingabebereich fängst du von vorn an. Für die andere Richtung springst du rüber zum URL-Decoder.

Wann du das wirklich brauchst

Einen Query-String-Wert von Hand zusammenbauen

Du musst ?customer=Ava%20Chen&status=active für einen schnellen curl-Test oder einen Deep Link basteln? Codiere jeden Wert hier und füg ihn in deine URL ein. Vergessen, einen Wert mit & drin (ein Kundenname wie "Smith & Co.") zu codieren — das ist der Klassiker für die mysteriösen Bugs vom Typ "die API sieht nur die Hälfte meines Parameters".

Eine Redirect-URL codieren

OAuth-Flows und SSO-Redirects übergeben die Ziel-URL innerhalb eines Query-Parameters (z. B. ?return_to=...). Diese Ziel-URL enthält selbst :, /, ?, & — die alle prozentcodiert werden müssen, damit die äußere URL wohlgeformt bleibt. RFC 6749 §3.1.2 sagt das für OAuth-Redirect-URIs ausdrücklich.

Ein Pfadsegment mit Schrägstrich codieren

Wenn deine REST-API Routen wie /repos/:owner/:name hat und der Name zufällig einen Schrägstrich enthält (selten, aber in manchen Katalogen erlaubt), muss der Schrägstrich zu %2F codiert werden, sonst behandelt der Router ihn als Pfadtrenner. Gleiche Logik für Dateinamen mit Leerzeichen oder Akzenten in Download-URLs.

Benutzer-Eingaben säubern, bevor sie eine URL berühren

Jeder String, der aus einem HTML-Formular, einer Suchbox oder einem CSV-Import in eine URL geht, muss codiert werden. Uncodierte Benutzer-Eingaben sind genau, wie man bei kaputten Links, Parameter-Injection-Vektoren oder URLs landet, die für ASCII-Nutzer funktionieren und für alle anderen still scheitern. Die OWASP-Notizen zu Path Traversal erinnern gut daran, was es kostet, diesen Schritt zu überspringen.

Häufige Fragen

Soll ich encodeURIComponent oder encodeURI verwenden?

Fast immer encodeURIComponent — das ist das, was diese Seite verwendet. Es ist die richtige Wahl für Query-Parameter-Werte, Pfadsegmente und überall, wo ein String ein "Stück" einer URL sein muss. encodeURI ist dafür da, eine URL zu codieren, die strukturell schon vollständig ist (selten in der Praxis — normalerweise baust du aus Teilen). Die oben verlinkte MDN-Referenz hat die komplette Tabelle, welche Zeichen welche Funktion escaped.

Warum wird mal + für Leerzeichen verwendet und mal %20?

Zwei Codierungstraditionen leben nebeneinander. application/x-www-form-urlencoded (der ?key=value-Body eines HTML-Formular-Submits) verwendet + für Leerzeichen. Die allgemeine URL-Prozentcodierung aus RFC 3986 verwendet %20. encodeURIComponent erzeugt immer %20. Die meisten Server akzeptieren beides, aber wenn dein nachgelagerter Decoder strikt im Formular-Modus ist, tausch nach der Codierung mit .replace(/%20/g, "+").

Werden Emojis und Nicht-ASCII-Text korrekt behandelt?

Ja. Der Encoder serialisiert die Eingabe zuerst als UTF-8 und codiert dann jedes Byte prozent-codiert. Ein Emoji wird also zu einer Multibyte-Prozent-Sequenz, und jeder standardkonforme Decoder bekommt es sauber zurück. Wenn du gegen ein System integrierst, das Latin-1 oder eine andere Legacy-Codierung verwendet, hast du ein anderes Problem — ändere das Upstream-System, baue keinen Nicht-UTF-8-Encoder selbst.

Welche Zeichen codiert encodeURIComponent NICHT?

Buchstaben A-Z und a-z, Ziffern 0-9, und die nicht reservierten Zeichen - _ . ! ~ * ' ( ). Alles andere wird prozentcodiert. Die Liste kommt direkt aus der ursprünglichen Spec und ist über jede moderne JavaScript-Engine fix — siehe die ECMAScript-Spec für encodeURIComponent, falls du Kapitel und Vers willst.

Wird die Eingabe, die ich hier einfüge, irgendwohin gesendet?

Nein. Die Codierung läuft komplett in deinem Browser über die JavaScript-Engine. Kein Netzwerk-Aufruf, kein Server, kein Log. Füg Secrets, Tokens, irgendetwas Sensibles ein — es verlässt deinen Rechner nicht.

Wie groß darf der String sein, den ich hier codiere?

Es gibt eine 256-KB-Obergrenze auf der Eingabe. Echte URL-Werte sind höchstens ein paar Kilobyte groß. Wenn du mehrere MB Daten codieren musst, versuchst du fast sicher, eine Payload in eine URL zu packen, obwohl du eigentlich einen Body POSTen solltest — codiere serverseitig und spare dir den Umweg.

Weitere URL- und Codierungs-Tools

Codieren ist eine Operation. Das hier passt natürlich dazu: