Jak zakódovat a dekódovat adresu URL v JavaScriptu?

Kódování a dekódování URL v JavaScriptu je nezbytné pro vývoj webu, zejména při vytváření požadavků GET s parametry dotazu. Tento proces zajišťuje, že speciální znaky v adresách URL jsou serverem správně interpretovány. Například mezery jsou v adresách URL převedeny na %20 nebo +. Tato příručka popisuje, jak používat funkce JavaScriptu, jako je encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() a unescape() pro efektivní kódování a dekódování URL.

Příklad:

  • Otevřete www.google.com a napište vyhledávací dotaz geeks for geeks.
  • Po zobrazení výsledků vyhledávání sledujte lištu URL prohlížeče. Adresa URL prohlížeče se bude skládat ze znaku %20 nebo + namísto mezery.
  • Adresa URL se zobrazí takto: https://www.google.com/search?q=geeks%20for%20geeks nebo https://www.google.com/search?q=geeks+for+geeks

Poznámka : Prohlížeč automaticky převedl mezery na znaky + nebo %20.

Kódování adresy URL: Kódování v Javascriptu lze dosáhnout pomocí:

Obsah


1. Funkce JavaScript encodeURI

The funkce encodeURI(). se používá ke kódování kompletního URI. Tato funkce zakóduje speciální znak kromě znaků (, / ?: @ & = + $ #).

Syntax:

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

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

2. Funkce JavaScript encodeURIComponent().

The funkce encodeURIComponent(). se používá ke kódování některých částí nebo komponent URI. Tato funkce kóduje speciální znaky. Kromě toho kóduje následující znaky: , / ? : @ & = + $ #

Syntax:

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

Výstup
geeks%20for%20geeks 

3. Funkce escape() JavaScriptu

JavaScriptová funkce escape(). vezme řetězec jako jeden parametr a zakóduje řetězec, který může být přenášen přes počítačovou síť, která podporuje znaky ASCII. Kódování je proces převodu prostého textu na šifrovaný text.

Syntax:

escape( string ) 

Poznámka: Funkce escape() pouze kóduje speciální znaky, tato funkce je zastaralá.

Výjimky: @ – + . /*_

Javascript
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 

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

Dekódování adresy URL

Dekódování v Javascriptu lze dosáhnout pomocí

1. Funkce JavaScript decodeURI().

The funkce decodeURI(). se používá k dekódování URI generovaných pomocí encodeURI() .

Syntax:

decodeURI( complete_encoded_uri_string ) 

Příklad : Tento příklad popisuje funkce decodeURI(). z Javascript .

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

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

2. Funkce JavaScript decodeURIComponent().

The funkce decodeURIComponent(). se používá k dekódování některých částí nebo komponent URI generovaných funkcí encodeURIComponent().

Syntax:

decodeURIComponent( encoded_uri_string_component ) 

Příklad : Tento příklad popisuje decodeURIComponent() Javascriptu.

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

Výstup
geeks for geeks 

3. Funkce JavaScript unescape().

Tato funkce bere řetězec jako jeden parametr a používá jej k dekódování řetězce zakódovaného funkcí escape(). Hexadecimální sekvence v řetězci je nahrazena znaky, které představují při dekódování pomocí funkce unescape().

Syntax:

unescape(string) 

Poznámka: Tato funkce dekóduje pouze speciální znaky, tato funkce je zastaralá.

Výjimky: @ – + . /*_

Javascript
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)); 

Výstup
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. Modul dotazovacího řetězce JavaScriptu

Modul querystring poskytuje nástroje pro analýzu a formátování řetězců URL dotazů. Lze jej použít ke kódování a dekódování komponent URL.

Kódování adresy URL:

Ke kódování adresy URL můžeme použít funkci querystring.stringify() k vytvoření řetězce dotazu z objektu a poté pomocí encodeURIComponent() zakódovat výsledný řetězec.

JavaScript
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); 


Výstup:

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

Dekódování adresy URL:

K dekódování adresy URL můžeme použít funkci querystring.parse() k analýze řetězce dotazu do objektu a poté získat přístup k dekódovaným hodnotám.

JavaScript
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 


Rozdíl mezi decodeURIComponent a decodeURI:

decodeURIComponent decodeURI
Definice Funkce decodeURIComponent() se používá k dekódování některých částí nebo komponent URI generovaných pomocí encodeURIComponent(). Dekódování v Javascriptu lze dosáhnout pomocí funkce decodeURI.
Syntax decodeURIComponent( encoded_uri_string_component ) decodeURI( complete_encoded_uri_string )
Speciální kódování znaků Vyžaduje řetězec encodeURIComponent(url), aby mohl dekódovat tyto znaky. Vyžaduje řetězec encodeURI(url), takže nemůže dekódovat znaky (, / ? : @ & = + $ #)
Příklad

decodeURIComponent(%41) Vrátí A

decodeURIComponent(%26): Vrátí &

decodeURI(%41): Vrátí A

decodeURI(%26): Vrátí %26

Kódování a dekódování URL v JavaScriptu je zásadní pro bezproblémový vývoj webu. Pomocí funkcí, jako je encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() a unescape(), mohou vývojáři zajistit, aby jejich adresy URL byly správně naformátovány a čitelné pro servery. Tato dovednost je nezbytná pro zpracování parametrů dotazu v požadavcích GET a zajišťuje bezproblémovou uživatelskou zkušenost na vašem webu.