Het coderen en decoderen van URL's in JavaScript is essentieel voor webontwikkeling, vooral bij het maken van GET-verzoeken met queryparameters. Dit proces zorgt ervoor dat speciale tekens in URL's correct worden geïnterpreteerd door de server. Spaties worden bijvoorbeeld geconverteerd naar %20 of + in URL's. In deze handleiding wordt beschreven hoe u JavaScript-functies zoals encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() en unescape() gebruikt voor effectieve URL-codering en decodering.

Voorbeeld:

• Open www.google.com en schrijf een zoekopdracht geeks voor geeks.
• Nadat de zoekresultaten verschijnen, bekijkt u de URL-balk van de browser. De browser-URL zal bestaan ​​uit %20 of + teken in plaats van een spatie.
• De URL wordt weergegeven als: https://www.google.com/search?q=geeks%20for%20geeks of https://www.google.com/search?q=geeks+for+geeks

Opmerking : De browser heeft de spaties automatisch omgezet in + of %20 tekens.

Coderen van een URL: Codering in Javascript kan worden bereikt met behulp van:

Inhoudsopgave

• 1. JavaScript encodeURI-functie
• 2. JavaScript-encodeURIComponent()-functie
• 3. JavaScript-escape()-functie
• 1. JavaScript-decodeURI() Functie
• 2. JavaScript-decodeURIComponent() Functie
• 3. JavaScript unescape()-functie
• 4. JavaScript-querystringmodule

1. JavaScript encodeURI-functie

De encodeURI()-functie wordt gebruikt om de volledige URI te coderen. Deze functie codeert het speciale teken, behalve de tekens (, / ?: @ & = + $ #).

Syntaxis:

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-encodeURIComponent()-functie

De encodeURIComponent() functie wordt gebruikt om sommige delen of componenten van URI te coderen. Deze functie codeert de speciale tekens. Bovendien codeert het de volgende tekens: , / ? : @ & = + $ #

Syntaxis:

encodeURIComponent( uri_string_component );>

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

geeks%20for%20geeks>

3. JavaScript-escape()-functie

JavaScript-escape()-functie neemt een string als een enkele parameter en codeert de string die kan worden verzonden via het computernetwerk dat ASCII-tekens ondersteunt. Coderen is het proces waarbij platte tekst wordt omgezet in cijfertekst.

Syntaxis:

escape( string )>

Opmerking: De functie escape() codeert alleen de speciale tekens; deze functie is verouderd.

Uitzonderingen: @ – + . /*_

een array van objecten java

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>

Het decoderen van een URL

Decodering in Javascript kan worden bereikt met behulp van

1. JavaScript-decodeURI() Functie

De decodeURI()-functie wordt gebruikt om de URI te decoderen die is gegenereerd door codeURI() .

Syntaxis:

decodeURI( complete_encoded_uri_string )>

Voorbeeld : Dit voorbeeld beschrijft de decodeURI()-functie van 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() Functie

De decodeURIComponent() functie wordt gebruikt om sommige delen of componenten van de URI te decoderen die zijn gegenereerd door encodeURIComponent().

Syntaxis:

decodeURIComponent( encoded_uri_string_component )>

Voorbeeld : Dit voorbeeld beschrijft de decodeURIComponent() van Javascript.

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

geeks for geeks>

3. JavaScript unescape()-functie

Deze functie gebruikt een tekenreeks als een enkele parameter en gebruikt deze om de tekenreeks te decoderen die is gecodeerd door de functie escape(). De hexadecimale reeks in de string wordt vervangen door de tekens die ze vertegenwoordigen bij decodering via unescape()-functie.

Syntaxis:

unescape(string)>

Opmerking: Deze functie decodeert alleen de speciale tekens, deze functie is verouderd.

Uitzonderingen: @ – + . /*_

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-querystringmodule

De querystringmodule biedt hulpprogramma's voor het parseren en opmaken van URL-queryreeksen. Het kan worden gebruikt voor het coderen en decoderen van URL-componenten.

Coderen van een URL:

Om een ​​URL te coderen, kunnen we de functie querystring.stringify() gebruiken om een ​​queryreeks van een object te maken en vervolgens encodeURIComponent() gebruiken om de resulterende tekenreeks te coderen.

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

Uitgang:

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

Een URL decoderen:

Om een ​​URL te decoderen, kunnen we de functie querystring.parse() gebruiken om de queryreeks in een object te parseren en vervolgens toegang te krijgen tot de gedecodeerde waarden.

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>

Verschil decodeURIComponent en decodeURI:

URL-codering en -decodering in JavaScript is cruciaal voor een naadloze webontwikkeling. Door functies zoals encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() en unescape() te gebruiken, kunnen ontwikkelaars ervoor zorgen dat hun URL's correct zijn opgemaakt en leesbaar zijn voor servers. Deze vaardigheid is essentieel voor het verwerken van queryparameters in GET-verzoeken en zorgt voor een soepele gebruikerservaring op uw website.