URL-Dekodierung JavaScript

Migel Hewage Nimesha 15 Februar 2024
  1. Notwendigkeit der URL-Codierung und -Decodierung
  2. URL-Decodierung in JavaScript
  3. Abschluss
URL-Dekodierung JavaScript

Dieser Artikel befasst sich mit der URL-Decodierung und dem Decodieren einer codierten URL mit JavaScript.

Notwendigkeit der URL-Codierung und -Decodierung

Es gibt bestimmte Zeichen, die eine URL haben sollte. Eine URL kann US-ASCII-Zeichen wie Zahlen von 0 bis 9 und Zeichen von a-z sowie einige Sonderzeichen enthalten.

Einige URLs können jedoch Zeichen oder Sonderzeichen enthalten, die nicht in US-ASCII enthalten sind. Dann brauchen wir die URL-Codierung.

Die URL-Codierung ermöglicht es uns, eine URL in einem geeigneten Format zu haben, d. h. in einer akzeptablen Form, selbst wenn sie Sonderzeichen außerhalb der US-ASCII-Tabelle enthält.

Siehe folgendes Beispiel.

http://example.us/url encoding

In der obigen URL gibt es eine Lücke/ein Leerzeichen zwischen der URL und der Codierung, was für ein URL-Format nicht akzeptabel ist. Beim Codieren der URL wird die Lücke durch einige Sonderzeichen ersetzt, und die URL hat das richtige Format.

Wir können die URL-Decodierung verwenden, um eine codierte URL zu decodieren. Dieser Vorgang ist die Umkehrung der URL-Codierung.

Wenn wir eine URL decodieren, können wir die URL besser lesbar machen.

URL-Decodierung in JavaScript

In JavaScript gibt es drei Methoden, um eine codierte URL zu decodieren.

  1. Methode unescape()
  2. Methode decodeURI()
  3. Methode decodeURIComponent()

Verwenden Sie die unescaped()-Methode, um eine verschlüsselte URL zu entschlüsseln

Diese Methode ist in JavaScript veraltet, was bedeutet, dass die Funktion in JavaScript nicht verwendet wird. Anstatt diese Funktion zu verwenden, können wir die anderen beiden Optionen verwenden, um eine verschlüsselte URL zu decodieren.

Verwenden Sie die Methode decodeURI(), um eine verschlüsselte URL zu dekodieren

In JavaScript haben wir die Methode encodeURI() zum Codieren einer URL und decodeURI() zum Decodieren einer codierten URL. Die Methode encodeURI() kodiert die URL-Adresse ohne die domänenbezogenen Teile der Adresse (HTTPS, Domänenname etc.).

decodeURI() ist die umgekehrte Methode von encodeURI(), die die codierte URL mit regulären Zeichen decodiert. Nachfolgend sind die Syntaxen für die Methoden decodeURI() und encodeURI() aufgeführt.

Syntax:

// Syntax for encoding
encodeURI(content to encode)

// Syntax for decoding
decodeURI(content to decode)

Um den Decodierungsprozess zu sehen, benötigen wir eine codierte URL. Nehmen wir eine Beispiel-URL.

http://example.us /url encoding

Als ersten Schritt sollten wir die URL unten als String einer Variablen zuweisen.

let exURL = ' http://example.us /url encoding';

Dann kodieren wir es mit der Methode encodeURI() und drucken mit der Methode console.log().

let encodedURL = encodeURI(exURL);
console.log(encodedURL);

In der obigen Anweisung haben wir die Methode encodeURI() einer Variablen namens encodedURL zugewiesen. Auf andere Weise können wir die Funktion encodeURI() wie unten direkt in der Funktion console.log() verwenden.

console.log(encodeURI(exURL));

Beide Wege liefern uns das gleiche Ergebnis, also gehen wir mit dem ersten Weg weiter. Nun sollte unser vollständiger JavaScript-Code so aussehen.

Vollständiger Code:

let exURL = 'http://example.us /url encoding';
let encodedURL = encodeURI(exURL);
console.log(encodedURL);

Ausgang:

Verwenden Sie die encodeURI()-Methode

Lassen Sie es uns nun mit der Methode decodeURI() decodieren. Erstens können wir den decodeURI()-Prozess wie unten beschrieben einer anderen Variablen zuweisen.

let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);

Ausgang:

decodeURI()-Methode verwenden

Wie Sie sehen können, erhalten wir die decodierte URL aus dem obigen Prozess.

Verwenden Sie die Methode decodeURIComponent(), um eine verschlüsselte URL zu decodieren

Die Methode decodeURIComponent() ist die umgekehrte Methode der Methode encodeURIComponent(). Die Methode encodeURIComponent() kodiert die URL-Adresse mit den domänenbezogenen Teilen davon.

Außerdem codiert es eine Reihe von Sonderzeichen, was die Methode encodeURI() nicht tut. Hier ist die Liste der einzigartigen Charaktere.

Liste der eindeutigen Zeichen

Der decodeURIComponent()-Ansatz entschlüsselt die verschlüsselte URL mit den relevanten Zeichen und Symbolen.

Syntax:

// Syntax for encoding
encodeURIComponent(content to encode)

// Syntax for decoding
decodeURIComponent(content to decode)

Nehmen wir eine Beispiel-URL.

https://stackoverflow.com/url+encoded string+in javascript

Im obigen Beispiel gibt es innerhalb der URL Leerzeichen, /, : und +. Lassen Sie uns die URL mit der Methode encodeURIComponent() kodieren.

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';
let encoded = encodeURIComponent(exURL);
console.log(encoded);

Ausgang:

Verwenden Sie die Methode encodeURICompoenent()

Versuchen wir nun, es mit der Methode decodeURIComponent() wie unten zu decodieren.

let decoded = decodeURIComponent(encoded);
console.log(decoded);

Wie oben haben wir einer Variablen die Methode decodeURIComponent() zugewiesen. Drucken Sie es mit der Methode console.log() aus.

Ausgang:

Use decodeURIComponent() Method

Wie Sie sehen können, wurde die von uns codierte URL als decodierte URL angegeben.

Vollständiger Code:

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';

let encoded = encodeURIComponent(exURL);
console.log(encoded);

let decoded = decodeURIComponent(encoded);
console.log(decoded);

Abschluss

Dieser Artikel führte kurz in JavaScript ein und lehrte, was URL-Codierung und -Decodierung sind. Dann haben wir hauptsächlich zwei Methoden besprochen: decodeURI() und decodeURIComponent(), zusammen mit einigen Beispielen.

Beide Methoden funktionieren auf zwei Arten, um je nach Anforderung die geeignete Methode zu verwenden. Die Methode unescape() ist seit kurzem veraltet, und stattdessen können wir die beiden anderen Methoden als Lösungen verwenden.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Verwandter Artikel - JavaScript Decode