Vanlig text

Procentkodad

Vad är URL-kodaren?

Släpp en sträng i vänster panel så visar höger panel den procentkodade versionen. Under huven kör encodeURIComponent, som escape:ar varje tecken med särskild betydelse i en URL — mellanslag blir %20, et-tecken blir %26, snabel-a blir %40, och så vidare. Det här är kodningen du vill ha för VÄRDEN i frågeparametrar, sökvägssegment, och överallt där en rå sträng måste åka med inuti en URL utan att förstöra den.

Det finns två kodningsvarianter och skillnaden spelar roll. encodeURIComponent (den här sidan) escape:ar allt specialtecken inklusive ?, #, &, = och / — för på värdenivå skulle de tecknen ändra URL:ens betydelse. encodeURI är mer tillåtande och låter de strukturella tecknen vara, eftersom den förväntar sig att du kodar en redan färdigformad URL. MDN listar tabellen över reserverade tecken om du behöver detaljerna. Om du bygger en hel URL från delar är det URL Builder du vill ha, inte den här sidan.

Själva kodningsregeln kommer från RFC 3986 §2.1: varje osäker byte skrivs som % följt av två hex-siffror för dess UTF-8-byte. Det är därför en emoji som raket ger fyra procenttripletter (det är fyra UTF-8-byte), medan en ASCII som ! stannar på ett. WHATWG:s URL-standard formaliserar hur moderna webbläsare gör det här, och Wikipedias artikel om procentkodning har en ren referenstabell om du vill dubbelkolla för hand. Allt händer i din webbläsare. Inget laddas upp, inget loggas.

Så använder du URL-kodaren

Tre steg. Sidan uppdateras medan du skriver — ingen Konvertera-knapp.

Klistra in din sträng eller klicka på Exempel

Skriv eller klistra in valfri text i vänster panel. Klicka Exempel för att läsa in en sträng med precis de tecken man stöter på på riktigt — mellanslag, et-tecken, en e-postadress, ett procenttecken. Exempel-input:

Ava Chen & friends? [email protected]  100% off!

Unicode och emoji funkar utmärkt — kodaren använder UTF-8-bytesekvenser, så ett japanskt namn eller en emoji kodas till en flerbyte-procentsekvens och kommer rent tillbaka genom valfri standardkompatibel avkodare.

Läs den kodade utdatan

Höger panel visar den procentkodade versionen. Mellanslag blir %20, & blir %26, ? blir %3F, @ blir %40, och % själv blir %25. Uppdaterar medan du skriver.

Kopiera eller ladda ner

Klicka Kopiera för att lägga den kodade strängen i urklipp, eller Ladda ner för att spara den som .txt-fil. Använd Rensa i inputpanelen för att börja om. För att gå åt andra hållet, hoppa över till URL-avkodaren.

När du faktiskt skulle använda det här

Bygga ett query string-värde för hand

Behöver konstruera ?customer=Ava%20Chen&status=active för ett snabbt curl-test eller en deep link? Koda varje värde här och klistra in i din URL. Att glömma koda ett värde med & i (ett kundnamn som "Smith & Co.") är en klassisk källa till mystiska "API:et ser bara halva min parameter"-buggar.

Koda en redirect-URL

OAuth-flöden och SSO-omdirigeringar skickar destinations-URL:en inuti en frågeparameter (t.ex. ?return_to=...). Den destinations-URL:en innehåller själv :, /, ?, & — varenda en måste procentkodas så att den yttre URL:en förblir välformad. RFC 6749 §3.1.2 tar upp det här explicit för OAuth-redirect-URI:er.

Koda ett sökvägssegment med snedstreck i

Om ditt REST-API har rutter som /repos/:owner/:name och namnet råkar innehålla ett snedstreck (sällsynt men lagligt i vissa kataloger) måste snedstrecket kodas till %2F, annars behandlar routern det som sökvägsavskiljare. Samma logik för filnamn med mellanslag eller accenter i nedladdnings-URL:er.

Sanera användarinmatning innan den når en URL

Varje sträng på väg in i en URL från ett HTML-formulär, en sökruta eller en CSV-import måste kodas. Okodad användarinmatning är precis så man hamnar i trasiga länkar, parameterinjektion eller URL:er som funkar för ASCII-användare och tyst misslyckas för alla andra. OWASP:s noteringar om path traversal är en bra påminnelse om vad det kostar att hoppa över det här steget.

Vanliga frågor

Ska jag använda encodeURIComponent eller encodeURI?

Nästan alltid encodeURIComponent — det är det den här sidan använder. Det är rätt val för värden i frågeparametrar, sökvägssegment, och överallt där en sträng ska vara en "bit" av en URL. encodeURI är till för att koda en URL som redan är strukturellt komplett (sällsynt i praktiken — vanligtvis bygger du från delar). MDN-referensen länkad ovan har den fullständiga tabellen över vilka tecken vardera funktionen escape:ar.

Varför används + ibland för mellanslag och ibland %20?

Två kodningstraditioner lever sida vid sida. application/x-www-form-urlencoded (kroppen ?nyckel=värde i en HTML-formulärsubmit) använder + för mellanslag. Den allmänna URL-procentkodningen från RFC 3986 använder %20. encodeURIComponent producerar alltid %20. De flesta servrar accepterar båda, men om din nedströms-avkodare är formulärsträng, byt med .replace(/%20/g, "+") efter kodning.

Hanterar den emoji och icke-ASCII-text korrekt?

Ja. Kodaren serialiserar indata som UTF-8 först, sedan procentkodar varje byte. Så en emoji blir en flerbyte-procentsekvens, och vilken standardkompatibel avkodare som helst ger dig den tillbaka. Om du integrerar med ett system som använder Latin-1 eller annan legacy-kodning har du ett annat problem — ändra uppströmssystemet, snickra inte ihop en icke-UTF-8-kodare för hand.

Vilka tecken kodar encodeURIComponent INTE?

Bokstäverna A-Z och a-z, siffrorna 0-9, och de oreserverade tecknen - _ . ! ~ * ' ( ). Allt annat procentkodas. Listan kommer direkt från originalspecifikationen och är fast i alla moderna JavaScript-motorer — se ECMAScript-specen för encodeURIComponent om du vill ha kapitel och vers.

Skickas indata jag klistrar in här någonstans?

Nej. Kodningen körs helt i din webbläsare via JavaScript-motorn. Inget nätverksanrop, ingen server, ingen logg. Klistra in hemligheter, tokens, vad som helst känsligt — det lämnar aldrig din maskin.

Hur stor sträng kan jag koda här?

Det finns ett tak på 256 KB för indata. URL-värden i verkligheten är max några kilobyte. Om du behöver koda flera MB data försöker du nästan säkert bädda in en payload i en URL när du borde POST:a en kropp — koda server-side och slipp turen.

Andra URL- och kodningsverktyg

Kodning är en operation. Det här passar naturligt ihop med den: