URL-kodning och avkodning, förklarat för utvecklare
Skriv ett mellanslag i en URL, eller ett kyrilliskt ord, eller ett &-tecken som tillhör din data snarare än själva adressen, och något måste ge vika. Webben garanterar bara säker överföring för en liten, förutsägbar uppsättning ASCII-tecken. Allt annat måste paketeras i ett format som routrar, servrar och webbläsare alla är överens om. Det formatet är procentkodning, mer vanligt kallat URL-kodning, och den här sidan låter dig konvertera text i båda riktningarna direkt i din webbläsare.
Vad procentkodning egentligen är
Regeln är mekanisk och lätt att följa. Varje tecken som inte kan förekomma bokstavligt ersätts av ett %-tecken följt av två hexadecimala siffror som anger bytevärdet för det tecknet. Ett mellanslag blir %20. Ett plustecken blir %2B. Nummertecknet blir %23. När ett tecken mappas till flera bytes, som de flesta icke-ASCII-tecken gör under UTF-8, får du helt enkelt flera trippletter i rad: euro-tecknet blir %E2%82%AC. Avkodning gör processen baklänges och läser varje tripplett tillbaka till sin ursprungliga byte.
Denna konvention definieras i URI-specifikationen (RFC 3986) och den är medvetet trist. Tristess är poängen. Varje välfungerande HTTP-klient och server på planeten implementerar samma regler, så en länk som är korrekt kodad på ett ställe anländer intakt överallt annars.
Varför det måste finnas
URL:er bär två typer av tecken med väldigt olika uppgifter. Reserverade tecken som /, ?, #, &, = och : är strukturella. De talar om för en parser var sökvägen slutar och frågesträngen börjar, eller var en parameter slutar och nästa börjar. Om din faktiska data innehåller en av dessa symboler måste den kodas så att parsern inte misstar den för skiljetecken. En orderreferens som A&B/2024 som släpps rå i en frågesträng skulle feltolkas som två parametrar och ett sökvägssegment.
Sedan finns det osäkra och icke-ASCII-tecken: mellanslag, citattecken, vinkelparenteser, bokstäver med accenter, emoji, allt utanför det vanliga ASCII-området. Dessa har inget att göra bokstavligt i en URL, antingen för att de blir förvanskade under överföring eller för att de saknar en definierad representation. Att koda dem håller länkar rena och förutsägbara istället för att lämna utfallet åt slumpen.
Var det dyker upp i verkligt arbete
Frågesträngar är det klassiska fallet. Varje värde du lägger till efter ?key=... bör kodas så att användarindata inte kan bryta strukturen. Detsamma gäller HTML-formulärinlämningar skickade som application/x-www-form-urlencoded, där webbläsaren kodar fältvärden automatiskt (och, av historisk konvention, gör om mellanslag till + istället för %20). Du stöter också på det när du bygger länkar som pekar på sidor med icke-latinska titlar, när du konstruerar API-förfrågningar för hand, när du skickar omdirigeringsmål som parametrar, och när du felsöker varför en förfrågan som ser bra ut i adressfältet anländer förvanskad till servern.
encodeURI kontra encodeURIComponent
JavaScript levererar två kodare, och att välja fel en är en vanlig bugg. Skillnaden handlar om omfattning. encodeURIComponent är till för en enskild datadel, till exempel ett frågevärde. Den kodar nästan allt, inklusive de reserverade tecknen /, ?, :, @, &, =, + och #. Det är precis vad du vill ha när datan tillåts innehålla dessa symboler som vanlig text.
encodeURI är till för en hel adress du avser hålla fungerande. Den lämnar de strukturella tecknen orörda, så snedstrecken, kolon och frågetecken som håller ihop URL:en överlever. Använd den när du har en fullständig URL och bara vill städa upp mellanslag eller icke-ASCII-tecken; ta till encodeURIComponent när du för in ett värde i en större URL. En enkel tumregel: koda hela länken med encodeURI, koda delarna du stoppar in med encodeURIComponent.
Allt stannar på din dator
Det här verktyget körs helt i din webbläsare. Text du klistrar in kodas eller avkodas lokalt med samma standardrutiner och färdas aldrig till en server, vilket gör det säkert för tokens, signerade parametrar eller annat du hellre inte skickar över nätet. Om du arbetar med andra textomvandlingar finns Base64-konverteraren precis bredvid, och du kan bläddra bland hela vår samling utvecklarverktyg för fler vardagliga hjälpmedel.
Vanliga frågor
Vad betyder %20 i en URL?
Det är ett kodat mellanslag. Mellanslagstecknet är inte tillåtet bokstavligt i en URL, så det ersätts av ett procenttecken och det hexadecimala värdet 20, vilket är bytevärdet för ett mellanslag.
Varför ser jag ibland ett plustecken istället för %20?
HTML-formulärdata av typen application/x-www-form-urlencoded kodar mellanslag som ett plustecken av historisk konvention. I en vanlig sökväg eller fråga kodas ett mellanslag som %20. Båda avkodas tillbaka till ett mellanslag i sitt rätta sammanhang.
När bör jag använda encodeURIComponent istället för encodeURI?
Använd encodeURIComponent för ett enskilt värde du för in i en URL, till exempel en frågeparameter, eftersom den även kodar reserverade tecken. Använd encodeURI för en komplett adress när du vill bevara snedstrecken, kolon och frågetecken som håller ihop den.
Ändrar URL-kodning betydelsen av min data?
Nej. Kodning är fullständigt reversibel. Att avkoda resultatet ger tillbaka exakt originaltexten, byte för byte, så länge samma teckenuppsättning används i båda ändarna.
Hur hanteras icke-ASCII-tecken som accenter eller emoji?
De omvandlas först till UTF-8-bytes, sedan blir varje byte sin egen procenttripplett. En enda accenterad bokstav eller emoji kan därför expandera till flera trippletter i den kodade utdatan.
Skickas min text till en server när jag använder det här verktyget?
Nej. Kodning och avkodning sker helt i din webbläsare. Ingenting du klistrar in laddas upp, så det är säkert att använda med privata eller känsliga strängar.