Das Kodieren und Dekodieren von URLs in JavaScript ist für die Webentwicklung unerlässlich, insbesondere wenn GET-Anfragen mit Abfrageparametern gestellt werden. Dieser Prozess stellt sicher, dass Sonderzeichen in URLs vom Server korrekt interpretiert werden. Beispielsweise werden Leerzeichen in URLs in %20 oder + umgewandelt. In dieser Anleitung erfahren Sie, wie Sie JavaScript-Funktionen wie encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() und unescape() für eine effektive URL-Kodierung und -Dekodierung verwenden.

Beispiel:

• Öffnen Sie www.google.com und schreiben Sie eine Suchanfrage „Geeks für Geeks“.
• Beobachten Sie nach dem Erscheinen der Suchergebnisse die URL-Leiste des Browsers. Die Browser-URL besteht aus %20 oder einem +-Zeichen anstelle von Leerzeichen.
• Die URL wird wie folgt angezeigt: https://www.google.com/search?q=geeks%20for%20geeks oder https://www.google.com/search?q=geeks+for+geeks

Notiz : Der Browser hat die Leerzeichen automatisch in +- oder %20-Zeichen umgewandelt.

Codierung einer URL: Die Kodierung in Javascript kann erreicht werden mit:

Inhaltsverzeichnis

• 1. JavaScript-encodeURI-Funktion
• 2. JavaScript-Funktion encodeURIComponent()
• 3. JavaScript-Funktion escape()
• 1. JavaScript decodeURI()-Funktion
• 2. JavaScript decodeURIComponent()-Funktion
• 3. JavaScript-Funktion unescape()
• 4. JavaScript-Querystring-Modul

1. JavaScript-encodeURI-Funktion

Der encodeURI()-Funktion wird verwendet, um den vollständigen URI zu kodieren. Diese Funktion kodiert das Sonderzeichen mit Ausnahme der Zeichen (, / ?: @ & = + $ #).

Syntax:

encodeURI( complete_uri_string ); 

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) 

https://www.google.com/search?q=geeks%20for%20geeks 

2. JavaScript-Funktion encodeURIComponent()

Der encodeURIComponent()-Funktion wird verwendet, um einige Teile oder Komponenten von URI zu kodieren. Diese Funktion kodiert die Sonderzeichen. Darüber hinaus kodiert es die folgenden Zeichen: , / ? : @ & = + $ #

Syntax:

encodeURIComponent( uri_string_component ); 

const component = 'geeks for geeks'; const encodedComponent = encodeURIComponent(component); console.log(encodedComponent); 

geeks%20for%20geeks 

3. JavaScript-Funktion escape()

JavaScript-Funktion escape() Nimmt eine Zeichenfolge als einzelnen Parameter und codiert die Zeichenfolge, die über das Computernetzwerk übertragen werden kann, das ASCII-Zeichen unterstützt. Beim Kodieren handelt es sich um den Prozess der Umwandlung von Klartext in Chiffretext.

Syntax:

escape( string ) 

Notiz: Die Funktion escape() kodiert nur die Sonderzeichen, diese Funktion ist veraltet.

Ausnahmen: @ – + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url);// encoding using encodeURI console.log(encodedURL) console.log(' ' + escape(url)); //encoding using escape 

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks 

Dekodierung einer URL

Die Dekodierung in Javascript kann mit erreicht werden

1. JavaScript decodeURI()-Funktion

Der decodeURI()-Funktion wird verwendet, um den von generierten URI zu dekodieren encodeURI() .

Syntax:

decodeURI( complete_encoded_uri_string ) 

Beispiel : Dieses Beispiel beschreibt die decodeURI()-Funktion von Javascript .

const url = 'https://www.google.com/search?q=geeks%20for%20geeks'; const decodedURL = decodeURI(url); console.log(decodedURL) 

https://www.google.com/search?q=geeks for geeks 

2. JavaScript decodeURIComponent()-Funktion

Der decodeURIComponent()-Funktion wird verwendet, um einige Teile oder Komponenten des von encodeURIComponent() generierten URI zu dekodieren.

Syntax:

decodeURIComponent( encoded_uri_string_component ) 

Beispiel : Dieses Beispiel beschreibt die decodeURIComponent() von Javascript.

const component = 'geeks%20for%20geeks' const decodedComponent = decodeURIComponent(component); console.log(decodedComponent) 

geeks for geeks 

3. JavaScript-Funktion unescape()

Diese Funktion nimmt einen String als einzelnen Parameter und verwendet ihn, um den von der Funktion escape() codierten String zu dekodieren. Die Hexadezimalfolge in der Zeichenfolge wird durch die Zeichen ersetzt, die sie darstellen, wenn sie über dekodiert werden unescape()-Funktion.

Syntax:

unescape(string) 

Notiz: Diese Funktion dekodiert nur die Sonderzeichen, diese Funktion ist veraltet.

Ausnahmen: @ – + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) console.log(escape(url)); console.log(decodeURI(encodedURL)); console.log(unescape(encodedURL)); 

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks https://www.google.com/search?q=geeks for geeks https://www.google.com/search?q=geeks for ... 

4. JavaScript-Querystring-Modul

Das Querystring-Modul stellt Dienstprogramme zum Parsen und Formatieren von URL-Abfragezeichenfolgen bereit. Es kann zum Kodieren und Dekodieren von URL-Komponenten verwendet werden.

Codierung einer URL:

Um eine URL zu kodieren, können wir die Funktion querystring.stringify() verwenden, um eine Abfragezeichenfolge aus einem Objekt zu erstellen, und dann encodeURIComponent() verwenden, um die resultierende Zeichenfolge zu kodieren.

const querystring = require('querystring'); const urlParams = {  q: 'geeks for geeks',  page: 1,  sort: 'desc' }; const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams); console.log(encodedURL); 

Ausgabe:

https://www.google.com/search?q=geeks%20for%20geeks&page=1&sort=desc 

Dekodierung einer URL:

Um eine URL zu dekodieren, können wir die Funktion querystring.parse() verwenden, um die Abfragezeichenfolge in ein Objekt zu analysieren und dann auf die dekodierten Werte zuzugreifen.

const decodedParams = querystring.parse('q=geeks%20for%20geeks&page=1&sort=desc'); console.log(decodedParams.q); // Output: geeks for geeks console.log(decodedParams.page); // Output: 1 console.log(decodedParams.sort); // Output: desc 

Unterschied decodeURIComponent und decodeURI:

Die URL-Kodierung und -Dekodierung in JavaScript ist für eine reibungslose Webentwicklung von entscheidender Bedeutung. Durch die Verwendung von Funktionen wie encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() und unescape() können Entwickler sicherstellen, dass ihre URLs ordnungsgemäß formatiert und für Server lesbar sind. Diese Fähigkeit ist für den Umgang mit Abfrageparametern in GET-Anfragen unerlässlich und sorgt für ein reibungsloses Benutzererlebnis auf Ihrer Website.