Config (JSON)

URL

Vad är URL-byggaren?

Lämna över ett JSON-objekt som beskriver delarna i en URL — protokoll, värd, sökväg, query-parametrar, hash — så ger verktyget tillbaka den ihopsatta URL:en, korrekt percent-kodad. Under huven används webbläsarens inbyggda URL-API, så utdata matchar exakt vad en webbläsare skulle producera om du byggde URL:en själv i JavaScript.

Anledningen till att det finns: att bygga en URL för hand är där buggarna gömmer sig. Du glömmer koda ett mellanslag i ett kundnamn, du dubbelkodar ett snedstreck som redan var kodat, du blandar ihop ? och &, du tappar ett värde för att du använde + istället för %20. WHATWG:s URL-spec definierar exakt ett rätt svar för varje indata, och det är vad du får här. Upprepade query-nycklar (t.ex. tag=red&tag=blue) stöds genom att skicka in en array — samma form som URLSearchParams accepterar.

Körs helt i din webbläsare. JSON-configen och den ihopsatta URL:en lämnar aldrig din maskin. Encoding-reglerna kommer direkt från RFC 3986 och WHATWG:s förfiningar ovanpå. Kombinera med URL-parsern när du vill skicka en URL fram och tillbaka genom ett strukturerat formulär.

Så använder du URL-byggaren

Tre steg. Varje steg motsvarar en knapp på den här sidan.

Klistra in en JSON-config

Klistra in ett JSON-objekt till vänster som beskriver URL-delarna. protocol och host är obligatoriska; resten är valfritt. Klicka på Exempel för att läsa in ett realistiskt fall med flera query-parametrar och en hash:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

Valfria fält: port, username, password, hash. Inuti searchParams är en sträng ett värde; en array är upprepade nycklar.

Läs den ihopsatta URL:en

Den högra panelen visar den ihopsatta URL-strängen. Mellanslag blir + i query-strängen, hakparenteser blir %5B/%5D, sökvägen normaliseras — samma encoding som URL-standarden definierar. Uppdateras medan du skriver.

Kopiera eller ladda ner

Klicka på Kopiera för att skicka URL:en till urklipp, eller Ladda ner för att spara den som en textfil. Använd Rensa i indatapanelen för att börja om.

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

Bygga test-fixtures för en HTTP-klient

Du skriver ett test som anropar /v1/orders med åtta query-parametrar, varav två innehåller mellanslag och en upprepas. Att skriva den kodade URL:en för hand i testet är en felfälla. Bygg den från ett JSON-objekt som du kan kopiera från en riktig request-logg, klistra in resulterande URL i assertionen. Klart.

Bygga OAuth-authorize-URL:er

OAuth-authorize-URL:er trycker in client_id, redirect_uri, scope, state, response_type och code_challenge i query-strängen. RFC 6749 kräver exakt de parameternamnen och en redirect_uri som redan är kodad en gång innan hela URL:en kodas igen. Byggaren hanterar det transparent — du ger råvärdena, den gör rätt.

Generera analytics- eller share-URL:er i ett skript

När du genererar en kampanj-URL med UTM-parametrar kommer värdena ofta från ett kalkylblad där utm_campaign innehåller mellanslag, ampersander och en och annan emoji. Att låta URL-konstruktorn sköta encodingen är säkrare än en sträng-mall. Utdata är identisk med vad Nodes URL-modul skulle producera.

Återskapa en bugg från ett supportärende

En kund rapporterar att en sökning med q=résumé writer ger 500 på API:et. Du vill återskapa exakt samma request. Bygg URL:en från JSON, kör sedan curl. Accenten på e:et och mellanslaget kodas båda så som webbläsaren skulle ha skickat dem — utan gissning.

Vanliga frågor

Vad är skillnaden mellan URL-byggaren och att slå ihop strängar själv?

Encoding. https://api.example.com/orders?customer=Ava Chen är ingen giltig URL — mellanslaget förstör den. Byggaren använder internt URLSearchParams, som kodar mellanslaget som + i query och som %20 i sökvägen. Handhopslagna strängar fattar fel på en av dem förr eller senare.

Hur skickar jag en query-parameter två gånger (t.ex. ?tag=red&tag=blue)?

Använd en array som värde: "tag": ["red", "blue"]. Byggaren skriver ut tag=red&tag=blue i den ordning du angav. Matchar URLSearchParams-specen.

Behöver jag kolonet efter protokollet (https:) eller bara https?

Båda funkar. Byggaren normaliserar både "protocol": "https" och "protocol": "https:" till https:. Samma för http, ftp, mailto och egna scheman.

Kan jag inkludera credentials (användarnamn/lösenord) i URL:en?

Ja — sätt "username" och "password" i configen. De dyker upp före värden som user:pass@host. Tänk dock på att RFC 3986 §3.2.1 varnar för det här i produktions-URL:er eftersom de hamnar i webbläsarhistorik, serverloggar och proxy-cachar.

Varför blir mitt mellanslag + istället för %20?

Mellanslag i query-komponenten kodas vanligtvis som + enligt reglerna för application/x-www-form-urlencoded — det är vad URLSearchParams producerar. Mellanslag i sökvägen kodas som %20. Båda är giltiga; servrar avkodar båda formerna. Om din server är trasig och bara hanterar %20 har du ett större problem än det här verktyget.

Vilket format ska själva input-JSON:en följa?

Standard-JSON — se json.org eller ECMA-404 för specen. Nycklar är strängar, värden är strängar eller (för searchParams) sträng-arrayer. Inga kommentarer. Inget hängande komma.

Andra URL- & JSON-verktyg

Att bygga är en riktning. Här är vad som passar naturligt ihop: