URL-kodare: Procentkoda text för URL:er

En URL, eller webbadress, kan tyckas kunna innehålla vilken text som helst, men sanningen är att den är bunden till en begränsad uppsättning tecken. Enligt standarden RFC 3986 finns det "reserverade" och "oreserverade" tecken. Oreserverade tecken (engelska bokstäver, siffror och några symboler som -, _, ., ~) kan användas fritt. Reserverade tecken, som /, ?, :, & och =, har särskilda funktioner för att strukturera URL:en. Problemet uppstår när dessa tecken, eller tecken som inte finns i den grundläggande ASCII-uppsättningen (som svenska å, ä, ö), behöver ingå som en del av datan i en URL, till exempel i en sökfråga. Om du försöker skapa en länk för en sökning på "röda stövlar", skulle en naiv URL se ut så här: https://exempel.se/sok?q=röda stövlar. Denna adress är ogiltig. Mellanslaget kommer att bryta adressen och ö kommer att feltolkas. Det är här vår URL-kodare kommer in i bilden. Verktyget omvandlar "osäkra" tecken till en säker representation genom procentkodning. Mellanslaget blir %20 och ö blir %C3%B6. Den korrekta och fungerande URL:en blir då: https://exempel.se/sok?q=r%C3%B6da%20st%C3%B6vlar. Denna process säkerställer att webbläsare och servrar över hela världen tolkar adressen korrekt. Om du istället har en kodad URL och vill se originaltexten kan du använda ett verktyg för URL-avkodning.

Vår URL-kodare erbjuder två huvudsakliga lägen: komponentkodning och fullständig URL-kodning. Att välja rätt läge är avgörande för att få ett korrekt resultat. Skillnaden ligger i hur de hanterar reserverade tecken som /, ? och &.

Komponentkodning är det vanligaste och mest användbara läget. Det är utformat för att koda enskilda delar (komponenter) av en URL, såsom ett värde i en sökparameter, ett användarnamn i en sökväg eller en filbeteckning. Detta läge är aggressivt och omvandlar alla reserverade tecken till deras procentkodade motsvarighet. Till exempel, om du vill skicka värdet pris<100kr&sort=populär som en enda parameter i en URL, måste & och < kodas. Komponentkodning omvandlar det till pris%3C100kr%26sort%3Dpopul%C3%A4r. Detta förhindrar att webbläsaren tolkar & som en ny parameteravskiljare. Detta läge motsvarar funktionen encodeURIComponent() i JavaScript.

Fullständig URL-kodning är avsett för situationer där du redan har en komplett URL-struktur men behöver koda specialtecken (som å, ä, ö) som finns i den. Detta läge kodar inte reserverade tecken som :, /, ? och &, eftersom det antar att de är en del av URL:ens struktur. Om du har en URL som https://exempel.se/sökresultat?för=fåglar, kommer detta läge att korrekt koda ö och å men lämna ://, ? och = orörda. Detta läge motsvarar funktionen encodeURI() i JavaScript. Använd detta läge med försiktighet och endast när du är säker på att du kodar en hel, välformulerad URL.

Ett av de vanligaste tecknen som behöver kodas i en URL är mellanslaget. Det finns två vanliga sätt att representera ett mellanslag: som %20 eller som ett plustecken +. Vilken metod som är korrekt beror på sammanhanget.

%20 är den officiella och mest universella metoden enligt RFC 3986-standarden. Det är en direkt procentkodning av ASCII-värdet för mellanslag (hexadecimalt 20). Denna representation är giltig och korrekt i alla delar av en URL, inklusive sökvägen (path) och sökfrågan (query string).

Plustecknet + har ett mer specifikt ursprung. Det kommer från en äldre standard för hur webbformulär skickar data, application/x-www-form-urlencoded. I denna kontext, och endast i URL:ens query string (delen efter ?), kan ett + tolkas som ett mellanslag av servern. Till exempel är ?q=röda+stövlar och ?q=röda%20stövlar ofta funktionellt likvärdiga.

Vår URL-kodare ger dig valet att "Koda mellanslag som +". Du bör använda detta alternativ om du specifikt behöver efterlikna beteendet hos ett HTML-formulär eller interagerar med ett äldre system som förväntar sig + som avgränsare. För alla andra fall, och för maximal kompatibilitet, är det rekommenderat att hålla sig till standarden %20. Om du är osäker är %20 alltid det säkrare valet.

Moderna webbadresser behöver kunna hantera ett globalt spektrum av tecken, långt bortom det engelska alfabetet. Detta inkluderar svenska tecken som å, ä, ö, och även emojis som 🇸🇪 eller 😊. Eftersom URL-standarden ursprungligen baserades på den begränsade teckenuppsättningen ASCII, krävs en särskild process för att inkludera dessa tecken.

Processen använder sig av UTF-8, en universell teckenkodning som kan representera praktiskt taget alla tecken från alla språk. Så här fungerar det:

1. Tecken till UTF-8: Först omvandlas tecknet till sin motsvarande byte-sekvens i UTF-8. Ett enkelt ASCII-tecken som 'a' är en byte, men mer komplexa tecken kräver flera. Till exempel: ö (Unicode U+00F6) blir två bytes i UTF-8: C3 och B6 (hexadecimalt). En emoji som 😊 (Unicode U+1F60A) blir fyra bytes: F0, 9F, 98, 8A.

2. Bytes till Procentkodning: Därefter tas varje byte i sekvensen och omvandlas till sin procentkodade form. Detta innebär att ett %-tecken placeras framför varje bytes hexadecimala värde. Resultatet blir: ö blir %C3%B6. 😊 blir %F0%9F%98%8A.

Denna metod, känd som percent-encoding, säkerställer att all textdata kan överföras säkert i en URL utan att feltolkas. Vår URL-kodare sköter hela denna process automatiskt. Du kan skriva in vilken text som helst, inklusive svenska tecken och emojis, och verktyget genererar omedelbart den korrekta, säkra och universellt kompatibla kodade strängen.

Vad är procentkodning? Procentkodning (percent-encoding) är en mekanism för att koda information i en URL. Den fungerar genom att ersätta tecken som antingen är otillåtna eller har en speciell betydelse i URL-syntaxen med en teckensekvens som börjar med ett procenttecken (%), följt av två hexadecimala siffror. Dessa siffror representerar tecknets numeriska värde i den underliggande teckenuppsättningen (vanligtvis ASCII eller UTF-8). Detta säkerställer att data kan överföras utan att störa URL:ens struktur.

Vilket läge ska jag använda för en sökparameter? För att koda ett värde som ska användas i en sökparameter (query parameter), bör du alltid använda Komponentkodning. Detta läge är specifikt utformat för att koda enskilda delar av en URL. Det ser till att reserverade tecken som &, = och ? inuti ditt parametervärde kodas korrekt (t.ex. till %26, %3D, %3F) så att de inte feltolkas som strukturella delar av URL:en.

Varför fungerade inte mitt &-tecken i parametern? Tecknet & är ett reserverat tecken i URL:er och används för att separera olika nyckel-värdepar i query-strängen (delen efter ?). Om ditt parametervärde innehåller ett &, till exempel produkt=Kaffe & bullar, kommer webbläsaren att tolka det som två parametrar: produkt=Kaffe och en andra parameter bullar utan värde. För att & ska tolkas som en del av texten måste det kodas till %26. Detta görs automatiskt när du använder komponentkodningsläget i vår URL-kodare.

En URL-kodare är ett oumbärligt verktyg för flera yrkesgrupper som arbetar med webben. Korrekt kodade URL:er är avgörande för allt från dataintegritet till framgångsrika marknadskampanjer.

För marknadsförare och SEO-specialister: Spårningslänkar med UTM-parametrar är en hörnsten i digital marknadsföring. En kampanj kan ha ett namn som Sommarrea 25% rabatt. Om detta namn läggs direkt i en URL (...&utm_campaign=Sommarrea 25% rabatt) kommer den att misslyckas på grund av mellanslagen och procenttecknet. Genom att använda vår URL-kodare blir resultatet Sommarrea%2025%25%20rabatt, en robust och säker sträng som garanterar att analysverktyg registrerar datan korrekt. När du har en färdigkodad, komplex URL kan du enkelt generera en QR-kod för att använda den i tryckt material eller på digitala skärmar.

För webbutvecklare: När applikationer konstruerar URL:er dynamiskt, antingen på servern eller i klienten med JavaScript, måste all användargenererad eller extern data kodas. Tänk dig en funktion som skapar en länk till en API-endpoint: https://api.exempel.se/data?id=${dataId}. Om dataId kan innehålla tecken som / eller &, är det absolut nödvändigt att koda det med en funktion som motsvarar komponentkodning. Att använda URL-kodare är ett snabbt sätt att felsöka, verifiera och generera korrekt kodade strängar under utvecklingsprocessen, vilket sparar tid och förhindrar svårfunna buggar relaterade till felaktig dataöverföring.