URL-kodare och avkodare

Acrafto Team Utvecklare
Uppdaterad
Koda som

För ett enskilt frågevärde eller ett sökvägssegment. Kodar allt utom bokstäver, siffror och - _ . ! ~ * ' ( ), precis som encodeURIComponent.

Resultat

Allt körs i din webbläsare och inget du klistrar in laddas upp. Det spelar roll, eftersom URL:er ofta innehåller token och sessions-ID.

Med det här verktyget kan du URL-koda och avkoda text online medan du skriver: det gör om mellanslag, bokstäver med accent eller prickar och tecken som & eller ? till procentkodade sekvenser som %20, och tillbaka till läsbar text. Den andra fliken är en URL-parser. Den delar upp en adress i protokoll, värd, sökväg och frågeparametrar som du kan ändra, stänga av eller rensa från spårningstaggar, och skriver tillbaka den korrekt kodade URL:en åt dig. Allt sker i din webbläsare.

Så här URL-kodar och avkodar du text

  1. Skriv eller klistra in i fältet på fliken Koda / Avkoda. Resultat uppdateras för varje tangenttryckning.
  2. Välj Riktning. Koda gör texten säker att använda i en URL, Avkoda gör om caf%C3%A9%20au%20lait till café au lait. Klistra in text med sekvenser som %20 i det tomma fältet så byter verktyget till Avkoda av sig självt (Koda i stället byter tillbaka). Klistrar du in vanlig text som behöver kodas i läget Avkoda byter det på samma sätt till Koda, med Avkoda i stället.
  3. När du kodar väljer du under Koda som vad texten är (se nästa avsnitt). Standardvalet, Parametervärde, passar för ett enskilt frågevärde.
  4. Kopiera lägger resultatet i urklipp. Byt flyttar resultatet till indatafältet och byter riktning. Det är ett snabbt test i två steg: att avkoda det du just kodade måste ge tillbaka din ursprungliga text.

Varje tecken som verktyget har ändrat markeras i resultatet. Håll muspekaren över ett tecken för att se tecknet, dess Unicode-kodpunkt och dess byte, till exempel é U+00E9 %C3%A9. Under fälten ser du antalet Tecken, UTF-8-byte och Kodade tecken (eller Avkodade tecken). Prova ett exempel läser in meningen Pris: 50 % rabatt på räksmörgås & bär? Ja!, som har 42 tecken men 47 UTF-8-byte, eftersom varje å, ä och ö tar två byte.

När du kodar kodar Varje rad för sig varje rad för sig och behåller radbrytningarna, vilket passar för en lista med värden eller länkar. Utan det kodas även radbrytningen och blir %0A. Om texten är en URL med parametrar erbjuder verktyget Dela upp i delar, som öppnar adressen på parserfliken.

URL-koda en parameter, en hel URL eller formulärdata

Alla tecken behöver inte kodas överallt. Ett snedstreck skiljer mappar åt i en sökväg men är vanlig data inuti ett parametervärde, så rätt resultat beror på vad du kodar. Koda som har fyra lägen:

  • Parametervärde fungerar som JavaScripts encodeURIComponent och passar för ett frågevärde eller ett sökvägssegment. Det kodar allt utom bokstäver, siffror och - _ . ! ~ * ' ( ), så ett &, =, / eller ? inuti värdet kan inte förstöra URL:en. Att koda café & crème ger caf%C3%A9%20%26%20cr%C3%A8me, redo att sättas efter q=.
  • Hel URL är till för en komplett adress som bara behöver rättas till. Det kodar mellanslag, tecken utanför ASCII, styrtecken, accent grave och " < > \ ^ { | }, och behåller allt som ger en URL dess struktur: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Så https://example.com/search?q=café au lait&lang=fr blir https://example.com/search?q=caf%C3%A9%20au%20lait&lang=fr. Sekvenser som redan är kodade lämnas som de är, och ett ensamt % blir %25. Här skiljer sig verktyget från JavaScripts encodeURI, som gör om ett befintligt %20 till %2520 och kodar hakparenteserna i en IPv6-adress som http://[2001:db8::1]:8080/.
  • Formulärdata följer formatet application/x-www-form-urlencoded som HTML-formulär och URLSearchParams skapar. Ett mellanslag blir +, och bara bokstäver, siffror och * - . _ lämnas okodade, så ! ' ( ) ~ kodas också.
  • Strikt RFC 3986 lämnar bara de oreserverade tecknen i RFC 3986 (på engelska) okodade: bokstäver, siffror och - . _ ~. OAuth 1.0 (RFC 5849) och AWS Signature Version 4 kräver exakt den här formen, eftersom en signatur bara stämmer när båda sidor kodar ! eller * på samma sätt.

Samma tecken i varje läge:

TeckenParametervärdeHel URLFormulärdataStrikt RFC 3986
mellanslag%20%20+%20
&%26&%26%26
/%2F/%2F%2F
+%2B+%2B%2B
~~~%7E~
!!!%21%21
****%2A
é%C3%A9%C3%A9%C3%A9%C3%A9

Text kodas alltid som UTF-8 och hexsiffrorna skrivs alltid med versaler. Om indata redan innehåller sekvenser som %20 visar en notis det och erbjuder Avkoda i stället, så att du inte kodar texten två gånger av misstag.

Vill du skicka JSON i en frågeparameter, minifiera den i JSON-formatteraren och koda den som Parametervärde: {"id":7,"tags":["a","b"]} blir %7B%22id%22%3A7%2C%22tags%22%3A%5B%22a%22%2C%22b%22%5D%7D. Det fungerar åt andra hållet också: avkoda parametern här och formatera den sedan där.

URL-avkodning: plustecken, %2520 och trasiga sekvenser

Avkodning fungerar oftast bara, men fyra situationer brukar ställa till det. Verktyget hanterar var och en av dem i stället för att stanna med ett felmeddelande:

  • Ett plustecken står för ett mellanslag i formulärdata och de flesta frågesträngar. Avkoda + som mellanslag är på som standard, så caf%C3%A9+au+lait avkodas till café au lait. I en hel URL räknas bara plustecknen efter ? som mellanslag, eftersom ett plustecken i en sökväg är ett vanligt tecken. Stäng av alternativet när ett plustecken ska vara just ett plustecken. Ett plustecken som kodats som %2B förblir alltid ett plustecken.
  • Dubbelkodning uppstår när två lager kod kodar samma värde, något som RFC 3986 uttryckligen varnar för. Varje % blir %25, så ett mellanslag går från %20 till %2520. Om det avkodade resultatet fortfarande innehåller sekvenser som %20 säger verktyget att texten troligen har kodats två gånger och erbjuder Avkoda igen.
  • En ogiltig sekvens, ett % som inte följs av två hexsiffror som i 100% eller %G1, får JavaScripts decodeURIComponent att kasta ett URIError. Här lämnas sådana sekvenser som de är, markeras i rött och räknas, och resten av texten avkodas.
  • Gamla Latin-1-länkar kommer från tiden före UTF-8, när vissa webbplatser kodade é som den enda byten %E9. caf%E9 är inte giltig UTF-8, så decodeURIComponent misslyckas och Pythons unquote returnerar caf följt av ersättningstecknet U+FFFD. Verktyget läser sådana byte som Windows-1252, avkodar caf%E9 till café och lägger till en notis om det.

Styrtecken i avkodad text, som en tabb eller ett nolltecken, visas som synliga symboler som ␉ och ␀, men Kopiera kopierar den riktiga texten.

URL-parser: dela upp en URL och ändra dess frågeparametrar

Klistra in en adress i fältet URL på fliken Analysera och ändra URL så delas den upp i Protokoll, Värd, Port, Sökväg och Fragment, samt Användarnamn och Lösenord när URL:en innehåller dem. Värdena visas avkodade, så fliken är också det snabbaste sättet att avkoda URL-parametrar: du läser löparskor dam i stället för l%C3%B6parskor+dam. Redigeringen fungerar åt båda hållen, som adressfältet och parametertabellen i Postman. Ändra ett fält så skrivs URL:en om direkt, korrekt kodad. Ändra URL:en så läses alla delar in på nytt. Delar som du inte rör förblir exakt som de var, tecken för tecken.

Tabellen Frågeparametrar listar varje parameter med dess Namn och Värde. Avmarkera Ta med i URL:en för att utesluta en parameter utan att ta bort den, vilket hjälper när du letar efter den parameter som förstör ett anrop. Lägg till parameter, Ta bort parameter och Sortera A till Ö gör vad de säger. Upprepade namn som tag=a&tag=b och namn utan värde som ?debug bevaras. Mellanslag i parametrar avgör om mellanslag skrivs som %20 eller +. Som standard följer det den URL du klistrade in.

Inloggnings- och betallänkar innehåller ofta en andra URL inuti en parameter, kodad så att dess egna ? och & inte blandas ihop med de yttre:

https://auth.example.com/authorize?client_id=abc&redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback%3Ftab%3D2

Ett värde som själv är en URL, vanligtvis i redirect_uri, return, url eller next, får knappen Redigera URL:en inuti. Den inre adressen https://app.example.com/callback?tab=2 öppnas som en egen nivå med egna delar och parametrar, en sökväg högst upp (Huvud-URL › redirect_uri) leder tillbaka, och varje ändring kodas tillbaka in i den yttre URL:en. Kopiera huvud-URL kopierar resultatet. Det fungerar flera nivåer djupt.

När delen efter # ser ut som parametrar, som #access_token=...&state=... i OAuth implicit flow eller #/search?q=shoes i rutterna i ensidiga appar, listar en andra tabell, Fragmentparametrar, dem också.

Parsern pekar också ut problem: en URL utan protokoll, som webbläsare behandlar som en relativ länk, en port utanför 0 till 65535 och tecken som måste kodas, som mellanslag, bokstäver med accent, " eller <, vilket Koda dem rättar till i ett enda steg. Text utan adress, som a=1&b=2, läses som en frågesträng. För ett internationaliserat domännamn visar verktyget den Punycode-form som DNS och webbläsare använder, så münchen.de blir xn--mnchen-3ya.de, och en domän som börjar med xn-- får sin läsbara form.

Kopiera URL kopierar den färdiga adressen, Öppna öppnar den i en ny flik (bara http- och https-länkar) och Kopiera som JSON ger dig parametrarna som ett JSON-objekt, där upprepade namn samlas i en array.

Ta bort UTM och andra spårningsparametrar från en URL

Länkar från nyhetsbrev, annonser och sociala nätverk innehåller parametrar som bara talar om för webbplatsen varifrån besökaren kom. UTM-parametrarna (på engelska) utm_source, utm_medium, utm_campaign, utm_term och utm_content går tillbaka på Urchin, föregångaren till Google Analytics. Klick-ID:n som fbclid (Facebook), gclid (Google Ads) och msclkid (Microsoft Advertising) läggs till av plattformarna själva.

Parsern märker dessa med taggen spårning, och Ta bort spårning (n) raderar alla på en gång. Förutom alla utm_*-parametrar känner den igen fler än 20 andra, som ttclid (TikTok), mc_cid (Mailchimp) och _hsenc (HubSpot). Parametrar som sidan behöver blir kvar: i butikslänken från Prova ett exempel tar Ta bort spårning (4) bort utm_source, utm_medium, utm_campaign och fbclid och behåller q, size, return och fragmentet #reviews.

En länk som ska bli en QR-kod är värd att rensa här först. Utan spårningsparametrar blir den kortare, och en kortare länk ger en glesare kod som är lättare att skanna.

Vad procentkodning är och hur tecken blir %XX

Procentkodning (på engelska), även kallad URL-kodning, skriver ett tecken som % följt av två hexadecimala siffror. En URL får bara innehålla en begränsad uppsättning ASCII-tecken, och en del av dem har en uppgift: ? inleder frågan, & skiljer parametrar åt, # inleder fragmentet. RFC 3986 kallar dessa reserverade tecken (: / ? # [ ] @ och ! $ & ' ( ) * + , ; =). Bokstäver, siffror och - . _ ~ är oreserverade och behöver aldrig kodas. Allt annat, och varje reserverat tecken som används som vanlig data, kodas.

Tecken utanför ASCII görs först om till UTF-8-byte, och varje byte får sin egen %XX:

  • é är U+00E9, som lagras som två byte i UTF-8, C3 A9, så det blir %C3%A9.
  • € är U+20AC, tre byte: %E2%82%AC.
  • En emoji som U+1F600 (leende ansikte) tar fyra byte: %F0%9F%98%80.

%c3%a9 och %C3%A9 betyder samma sak, men RFC 3986 rekommenderar versaler, vilket är vad verktyget skriver. En tabell över procentkodning för de tecken du oftast stöter på:

TeckenKodatTeckenKodat
mellanslag%20+%2B
!%21,%2C
"%22/%2F
#%23:%3A
$%24;%3B
%%25=%3D
&%26?%3F
'%27@%40
(%28[%5B
)%29]%5D
*%2Aradbrytning%0A

URL-kodning i JavaScript, Python och PHP

Varje språk har funktioner för detta, och de skiljer sig främst i hur de behandlar mellanslag, snedstreck och ! ' ( ) * ~.

JavaScript har encodeURIComponent (på engelska) för ett värde, encodeURI för en hel adress och URLSearchParams för formulärkodning:

encodeURIComponent("café & crème")                     // "caf%C3%A9%20%26%20cr%C3%A8me"
encodeURI("https://example.com/a b?q=café")            // "https://example.com/a%20b?q=caf%C3%A9"
new URLSearchParams({ q: "café & crème" }).toString()  // "q=caf%C3%A9+%26+cr%C3%A8me"
decodeURIComponent("caf%C3%A9")                        // "café"

decodeURIComponent gör inte om + till ett mellanslag, och kastar ett URIError vid en ogiltig sekvens som 100%.

I Python finns funktionerna i urllib.parse. quote behåller / som standard (safe='/') och kodar annars allt utom de oreserverade tecknen i RFC 3986. quote_plus skriver mellanslag som + och kodar även /:

from urllib.parse import quote, quote_plus, urlencode, unquote_plus

quote("café & crème/brûlée")       # 'caf%C3%A9%20%26%20cr%C3%A8me/br%C3%BBl%C3%A9e'
quote("a b/c", safe="")            # 'a%20b%2Fc'
quote_plus("café & crème/brûlée")  # 'caf%C3%A9+%26+cr%C3%A8me%2Fbr%C3%BBl%C3%A9e'
urlencode({"q": "café & crème", "page": 2})  # 'q=caf%C3%A9+%26+cr%C3%A8me&page=2'
unquote_plus("caf%C3%A9+au+lait")  # 'café au lait'

I PHP kodar urlencode som ett HTML-formulär och skriver ett mellanslag som +, medan rawurlencode följer RFC 3986 och skriver %20:

urlencode("café & crème");     // "caf%C3%A9+%26+cr%C3%A8me"
rawurlencode("café & crème");  // "caf%C3%A9%20%26%20cr%C3%A8me"

rawurlencode ger samma resultat som Strikt RFC 3986. urlencode motsvarar Formulärdata förutom *, som den kodar som %2A.

Vanliga frågor

Ska ett mellanslag kodas som %20 eller +?

%20 fungerar överallt i en URL. Ett + betyder mellanslag bara i frågesträngen och i formulärdata, det format som HTML-formulär skickar. I en sökväg är + ett vanligt plustecken, så /a+b förblir /a+b. När ett frågevärde behöver ett riktigt plustecken skriver du det som %2B. I verktyget skriver Formulärdata mellanslag som + och de andra tre lägena som %20.

Vad betyder %20, %2F och %3D i en URL?

De är kodade tecken: %20 är ett mellanslag, %2F ett snedstreck och %3D ett likhetstecken. Andra du ofta ser är %26 (&), %3F (?), %3A (:), %2C (komma) och %27 (apostrof). De två siffrorna är tecknets kod i hexadecimalt. Bokstäver med accent eller prickar och andra tecken utanför ASCII tar två till fyra sådana par, som %C3%A9 för é. Klistra in hela strängen i avkodaren för att läsa den.

Vad är skillnaden mellan encodeURI och encodeURIComponent?

encodeURI är avsedd för en hel adress och lämnar tecknen som ger den dess struktur, som : / ? # & =, orörda. encodeURIComponent är avsedd för en enskild del, ett parametervärde eller ett sökvägssegment, och kodar även dessa tecken, så https://example.com/?a=1&b=2 blir https%3A%2F%2Fexample.com%2F%3Fa%3D1%26b%3D2. I det här verktyget motsvarar Parametervärde encodeURIComponent, och Hel URL liknar encodeURI men behåller befintliga sekvenser som %20 i stället för att göra om dem till %2520.

Hur tar jag bort UTM-parametrar från en URL?

Klistra in länken på fliken Analysera och ändra URL och tryck på Ta bort spårning (n). Då raderas varje utm_*-tagg och klick-ID:n som fbclid och gclid på en gång. Tryck sedan på Kopiera URL. Vill du ta bort bara några av dem använder du Ta bort parameter på de rader du inte vill ha.

Är URL-kodning samma sak som kryptering eller Base64?

Nej. URL-kodning döljer ingenting: vem som helst kan avkoda caf%C3%A9 tillbaka till café, så det skyddar aldrig ett lösenord eller en token. Det gör bara tecken säkra att använda i en adress. Base64 är en annan kodning som gör om all data, även binära filer, till en sträng med 64 tecken. En Base64-sträng i en URL behöver fortfarande få sina +, / och = kodade, om du inte använder den URL-säkra varianten, som Base64-kodaren och avkodaren kan skapa.

Laddas URL:erna jag klistrar in upp eller sparas de?

Nej. Kodning, avkodning och analys sker i din webbläsare, och inget du klistrar in skickas till en server. Det spelar roll, eftersom URL:er ofta innehåller åtkomsttoken, sessions-ID eller koder för återställning av lösenord. Webbläsaren kommer bara ihåg din valda flik och dina val, aldrig texterna. Det enda som läser in adressen är Öppna, som öppnar den i en ny flik precis som när du klickar på länken.

Fler verktyg för programmerare finns i kategorin Utvecklare, och verktyg som gör om ett format till ett annat är samlade under Omvandlare. Vill du se vad som skiljer två långa URL:er åt, till exempel ett fungerande och ett felande API-anrop, klistrar du in dem i verktyget för att jämföra texter och jämför tecken för tecken.

Jag skulle uppskatta om du kunde dela dessa sidor med vänner, bokmärka dem eller länka till dem. Tack! 🙏