URL-koder og -dekoder

URL-/prosent-koding erstatter tegn som er utrygge eller tvetydige i en URL med % etterfulgt av deres UTF-8 byte-verdi i hex. Komponent-modus bruker encodeURIComponent() og koder hvert reservert tegn — korrekt for verdier du bygger inn i en spørringsstreng eller bane. Full URL-modus bruker encodeURI(), som bevarer URL-strukturelle tegn som :/?#&=.

Eksempel

Input:

hello world & café / 日本語

Kodet som Komponent:

hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Kodet som Full URL:

hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Merk at Full URL lot & og / være i fred fordi de har strukturell betydning i en URL.

Vanlige feil og fallgruver

De fleste kodingsproblemer kommer fra å velge feil modus eller å kjøre verktøyet to ganger på samme input. Punktene under dekker tilfellene vi ser oftest.

• Bruk av encodeURI for spørringsverdier. encodeURI("a&b=c") gir a&b=c (uendret), noe som bryter spørringsstrengen. Bruk Komponent-modus (encodeURIComponent) for verdier.
• Dobbelkoding. Å kode hello%20world en gang til gir hello%2520world. Dekod først eller hopp over ett lag.
• Glemt #. En # inne i en spørringsverdi behandles som starten på fragmentet med mindre den kodes som %23.
• Forvirring rundt plusstegn. + betyr mellomrom i form-kodede body-er, men er et bokstavelig + i en URL-bane eller spørring. For å sende et ekte plusstegn i en spørringsverdi, kod det som %2B.
• Feilformet prosentsekvens. En bokstavelig % som aldri ble kodet får decodeURIComponent til å kaste URI malformed. Enten kod % som %25, eller fjern enslige prosenttegn før dekoding.
• UTF-8 vs Latin-1 på gamle servere. Dette verktøyet bruker alltid UTF-8. Noen veldig gamle systemer forventer Latin-1 / windows-1252 — der er é %E9, ikke %C3%A9. Hvis du ser mojibake, er den andre siden ikke UTF-8.

Hva er forskjellen mellom encodeURI og encodeURIComponent?

encodeURIComponent escaper alt som ikke er en bokstav, et siffer eller ett av -_.!~*'(), så det er trygt for individuelle spørringsverdier og banesegmenter. encodeURI lar URL-reserverte tegn som :/?#&= være i fred, så det er for å kode en hel URL som allerede har struktur. Bruk Komponent 95 % av tiden; bruk Full URL kun når du har en stort sett gyldig URL med tilfeldige mellomrom eller Unicode.

Hvilke tegn trenger egentlig koding i en spørringsstreng?

Spørringsstrengens skilletegn & og = må kodes inne i en verdi (ellers ser de ut som separatorer). Mellomrom blir %20 eller +. Fragment-markøren # må kodes. Pluss: /, ?, alt ikke-ASCII og kontrolltegn. encodeURIComponent håndterer alle disse; encodeURI lar &, =, /, ?, # være ukodet fordi de er URL-strukturelle.

Hvorfor blir URL-en min dobbelkodet?

Dobbelkoding skjer når du koder en verdi som allerede er kodet. Et mellomrom blir %20, så blir selve % til %25, som gir %2520. Vanligvis forårsaket av å sende en allerede kodet URL gjennom encodeURIComponent igjen, eller av et rammeverk som auto-koder oppå din manuelle koding. Dekod én gang og kod på nytt rent, eller hopp over ett lag.

Hvordan håndteres ikke-ASCII-tegn som emoji eller bokstaver med aksent?

JavaScripts kodere konverterer ikke-ASCII-tegn til UTF-8 byte først, og prosent-koder deretter hver byte. Så é blir %C3%A9 (to byte) og en emoji som 😀 blir %F0%9F%98%80 (fire byte). Dekoding reverserer prosessen. Dette er standard RFC 3986-oppførsel og fungerer med alle moderne servere.

Hvorfor feiler dekoding med "URI malformed"?

decodeURIComponent kaster når den ser en ugyldig prosentsekvens — et enslig % som ikke etterfølges av to hex-siffer (f.eks. %ZZ eller bare %), eller UTF-8 byte-sekvenser som ikke er gyldige (f.eks. %C3 uten en gyldig fortsettelsesbyte). Vanlige årsaker: et bokstavelig % i input som aldri ble kodet, eller en streng som allerede er dekodet én gang og fortsatt har prosenttegn i seg.

Skal mellomrom bli til + eller %20?

Begge sees i praksis. %20 er korrekt overalt — i baner, spørringsstrenger og fragmenter. Snarveien + betyr bare "mellomrom" inne i application/x-www-form-urlencoded-formatet som brukes ved HTML-skjemainnsending. Dette verktøyet bruker %20 fordi encodeURIComponent gjør det. Hvis du spesifikt trenger +, erstatt %20 med + etter koding.