Encode URL in JavaScript: 3 Methoden, die Ihre Website retten

Einleitung: Warum URL-Kodierung keine langweilige Theorie ist, sondern die Rettung Ihrer Anwendung

Stellen Sie sich vor: Sie schreiben eine Webanwendung in JavaScript, ein Benutzer gibt die Suchanfrage «JavaScript & Node.js: Best Practices» ein. Sie übergeben diesen Text als Parameter einer GET-Anfrage in der URL. Sie öffnen die Browserkonsole – und dort erscheint ein Fehler. Oder, noch schlimmer: Die Anfrage wird gesendet, aber der Server versteht sie nicht, und anstatt Suchergebnissen sieht der Benutzer eine leere Seite.

Kommt Ihnen das bekannt vor? Wenn ja, ist dieser Artikel für Sie. Wenn nicht, ist er trotzdem für Sie, denn früher oder später werden Sie darauf stoßen. Das Thema URL-Kodierung in JavaScript ist eine der häufigsten Fragen auf Stack Overflow (Zehntausende von Aufrufen), und das aus gutem Grund. Es ist das kleine Detail, das einen professionellen Entwickler von einem Anfänger unterscheidet.

Heute werden wir drei Methoden zur URL-Kodierung in JavaScript durchgehen, lernen, das richtige Werkzeug für jede Aufgabe auszuwählen und reale Beispiele aus dem Leben eines Webentwicklers betrachten. Los geht's!

Was ist URL-Kodierung und warum wird sie benötigt

Bevor wir Code schreiben, lassen Sie uns die Theorie klären. Eine URL (Uniform Resource Locator) hat eine strenge Struktur. Nur bestimmte Zeichen sind erlaubt: lateinische Buchstaben, Ziffern und einige Sonderzeichen (-, _, ., ~). Leerzeichen, kyrillische Zeichen, die Zeichen &, ?, # und andere sind hingegen verboten.

Wenn wir versuchen, solche Zeichen in einer URL zu übergeben, können der Browser oder der Server die Anfrage falsch interpretieren. Beispielsweise trennt das Zeichen & in einer Abfragezeichenfolge die Parameter voneinander. Wenn es innerhalb eines Parameterwerts auftaucht, wird die Logik gestört.

Die Lösung ist die URL-Kodierung (Prozentkodierung). Verbotene Zeichen werden durch eine Sequenz der Form %XX ersetzt, wobei XX der hexadezimale Code des Zeichens in der UTF-8-Kodierung ist. Zum Beispiel wird ein Leerzeichen zu %20 und der kyrillische Buchstabe «а» zu %D0%B0.

In JavaScript gibt es dafür drei eingebaute Mechanismen. Lassen Sie uns jeden davon durchgehen.

Methode 1: encodeURI() – für vollständige URLs

Die Funktion encodeURI() ist für die Kodierung einer vollständigen URL gedacht. Sie ersetzt alle Zeichen außer denen, die Teil der URI-Syntax sind: :, /, ?, #, &, = und andere.

Syntax

encodeURI(uri)

Beispiel

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";\nconst encoded = encodeURI(url);\nconsole.log(encoded);\n// Ergebnis: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"\n

Beachten Sie: encodeURI() hat die Leerzeichen kodiert, aber die Zeichen &, ? und = nicht verändert. Dies ist für eine vollständige URL korrekt, aber gefährlich für Parameter. Wenn in unserer Abfrage ein &-Zeichen innerhalb eines Parameterwerts vorkäme, würde es unverändert bleiben und die Abfragezeichenfolge zerstören.

Wann verwenden

\n
• Wenn die gesamte URL kodiert werden muss (z. B. zur Übergabe an window.location)
\n
• Wenn die URL keine Benutzerdaten mit potenziell gefährlichen Zeichen enthält
\n

Wann NICHT verwenden

\n
• Zur Kodierung einzelner Abfrageparameter
\n
• Wenn die URL Benutzereingaben enthält (Formulare, Suche, Kommentare)
\n

Methode 2: encodeURIComponent() – für Parameter und Werte

Dies ist Ihr tägliches Hauptwerkzeug. encodeURIComponent() kodiert alle Zeichen außer Buchstaben, Ziffern und -, _, ., ~. Es kodiert sogar die Zeichen, die Teil der URI-Syntax sind – &, ?, =, # und so weiter.