URL-Kodierung in JavaScript

Sahil Bhosale 12 Oktober 2023
  1. Was ist der Unterschied zwischen URI und URL?
  2. Codieren einer URL mit der Methode encodeURI() in JavaScript
  3. Codieren einer URL mit der Methode encodeURIComponent() in JavaScript
URL-Kodierung in JavaScript

Eine URL-Codierung ist ein Prozess der Codierung von 8-Bit-Zeichen innerhalb der URL mit % gefolgt von einem hexadezimalen Zeichen. Es wird auch als Prozentcodierung bezeichnet, da wir die Zeichen durch ein Prozentzeichen ersetzen. Eine URL-Codierung kann mit fast jeder Programmiersprache erfolgen, einschließlich JavaScript.

Der Grund für das Codieren einer URL ist, dass eine URL nur bestimmte Zeichen aus der ASCII-Tabelle enthalten kann. Alle anderen Zeichen in der URL müssen codiert werden, damit die URL richtig funktioniert. Die Zeichen, die in einer URL kodiert werden müssen, sind ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ':', ';', '=' sowie '%'. Weitere Informationen zu diesen Zeichen und ihrer Kodierungsform finden Sie unter diesem Link.

Was ist der Unterschied zwischen URI und URL?

Bevor wir fortfahren, machen wir uns zunächst mit URI und URL vertraut.

Ein Uniform Resource Identifier (URI) wird verwendet, um eine Ressource über das Internet zu identifizieren. Im Gegensatz dazu ist der Uniform Resource Locator (URL) etwas, das Ihnen hilft, diese Ressource zu finden und zu erreichen.

Ein URI kann sowohl ein Bezeichner als auch ein Locator sein, während eine URL nur ein Locator sein kann. Eine URL kommt unter URI; Daher klingen beide ein bisschen ähnlich, haben aber feine Unterschiede zwischen ihnen.

Zum Beispiel ist facebook.com eine URL, weil sie angibt, wo sich die Webseite von Facebook befindet, während ein nahe gelegenes Café eine URI sein kann, weil Sie wissen, wo sich das Café (eine Ressource) befindet, und Sie auch wissen, wie Sie es erreichen dort (der Weg).

Codieren einer URL mit der Methode encodeURI() in JavaScript

Die Methode encodeURI() ist eine der Methoden, mit denen eine URL in JavaScript kodiert werden kann. Diese Methode kann verwendet werden, wenn Sie über eine vollständige URL verfügen.

Nehmen wir an, wir haben eine URL als https://en.wikipedia.org/[$q=english &language], und nun codieren wir diese URL mit der Methode encodeURI(), um zu sehen, welche Ausgabe diese Methode liefert.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURI(URL));

Ausgabe:

https://en.wikipedia.org/%5Bq=english%20&language%5D

Beachten Sie, dass diese Methode nur sehr wenige Zeichen in einer URL wie Leerzeichen und eckige Klammern codiert.

Diese Methode codiert die folgenden Sonderzeichen nicht.

encodeURI() ` will not encode: ` ~!@#$ & * () =: /,;?+'

Wenn Sie einige der anderen Sonderzeichen codieren möchten, können Sie die Methode encodeURIComponent() verwenden.

Codieren einer URL mit der Methode encodeURIComponent() in JavaScript

Die Methode encodeURIComponent() kann auch verwendet werden, um eine URL zu kodieren. Diese Methode kann verwendet werden, wenn Sie nur einen Teil einer URL haben. Wie wir bereits gesehen haben, kodiert die Methode encodeURI() nur sehr wenige Zeichen, aber wenn Sie auch andere Zeichen kodieren möchten, können Sie die Methode encodeURIComponent() verwenden.

Nehmen wir die gleiche URL wie zuvor und sehen wir, welche Ausgabe wir erhalten, wenn wir diese Methode zum Codieren der Zeichenkette verwenden.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURIComponent(URL));

Ausgabe:

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

Wie Sie sehen, hat diese Methode den größten Teil der URL codiert.

Diese Methode codiert die folgenden Sonderzeichen nicht.

encodeURIComponent() ` will not encode: ` ~! * ()'

Abhängig von Ihren Anforderungen und Ihrer Verwendung können Sie eine oder beide der beiden oben genannten Methoden verwenden, um eine URL in JavaScript zu codieren.

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

Verwandter Artikel - JavaScript Encoding