JavaScript URL-kodeeksempel - Sådan bruges encodeURIcomponent () og encodeURI ()

Du tror måske det encodeURIog encodeURIComponentgør det samme, i det mindste ud fra deres navne. Og du kan være forvirret, hvilken du skal bruge, og hvornår.

I denne artikel vil jeg afmystificere forskellen mellem encodeURIog encodeURIComponent.

Hvad er en URI, og hvordan adskiller den sig fra en URL?

URI står for Uniform Resource Identifier.

URL står for Uniform Resource Locator.

Alt, hvad der entydigt identificerer en ressource, er dens URI, såsom id, navn eller ISBN-nummer. En URL specificerer en ressource, og hvordan den kan tilgås (protokollen). Alle URL'er er URI'er, men ikke alle URI'er er URL'er.

Hvorfor skal vi kode?

URL-adresser kan kun have bestemte tegn fra ASCII-sæt med 128 tegn. Reserverede tegn, der ikke hører til dette sæt, skal kodes.

Dette betyder, at vi skal kode disse tegn, når vi overgår til en URL. Specialtegn såsom &, space, !når indtastes i en url behov for at blive sluppet, da de ellers kan forårsage uforudsigelige situationer.

Brugssager:

  1. Brugeren har indsendt værdier i en form, der kan være i et strengformat og skal sendes ind, såsom URL-felter.
  2. Brug for at acceptere parametre for forespørgselsstreng for at kunne foretage GET-anmodninger.

Hvad er forskellen mellem encodeURI og encodeURIComponent?

encodeURIog encodeURIComponentbruges til at kode Uniform Resource Identifiers (URI'er) ved at erstatte visse tegn med en, to, tre eller fire escape-sekvenser, der repræsenterer UTF-8-kodningen af ​​tegnet.

encodeURIComponentskal bruges til at kode en URI- komponent - en streng, der formodes at være en del af en URL.

encodeURIskal bruges til at kode en URI eller en eksisterende URL.

Her er en praktisk tabel over forskellen i kodning af tegn

Hvilke tegn er kodet?

encodeURI() vil ikke kode: [email protected]#$&*()=:/,;?+'

encodeURIComponent() vil ikke kode: ~!*()'

Tegnene A-Z a-z 0-9 - _ . ! ~ * ' ( )undslippes ikke.

Eksempler

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch

Hvornår skal kodes

  1. Når du accepterer et input, der kan have mellemrum.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html

  2. Når du opretter en URL fra forespørgselsstrengparametre.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99

  3. Når du accepterer forespørgselsparametre, der kan have reserverede tegn.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple

Resumé

Hvis du har en komplet URL, skal du bruge encodeURI. Men hvis du har en del af en URL, skal du bruge encodeURIComponent.

Er du interesseret i flere tutorials og JSBytes fra mig? Tilmeld dig mit nyhedsbrev. eller følg mig på Twitter