Kodowanie i dekodowanie URL

Acrafto Team Programiści
Zaktualizowano
Koduj jako

Dla jednej wartości zapytania lub segmentu ścieżki. Koduje wszystko oprócz liter, cyfr i - _ . ! ~ * ' ( ), tak samo jak encodeURIComponent.

Wynik

Wszystko działa w Twojej przeglądarce, a wklejane teksty nie są nigdzie wysyłane. To ważne, bo adresy URL często zawierają tokeny i identyfikatory sesji.

URL encode i decode tekstu online w trakcie pisania: narzędzie zamienia spacje, litery z ogonkami i symbole takie jak & czy ? na sekwencje zakodowane procentowo, na przykład %20, i przywraca je do czytelnej postaci. Druga zakładka to parser URL. Dzieli dowolny adres na protokół, host, ścieżkę i parametry zapytania, które możesz edytować, wyłączać albo oczyszczać ze znaczników śledzących, a poprawnie zakodowany adres zapisuje za Ciebie. Wszystko dzieje się w Twojej przeglądarce.

Jak zrobić URL encode i decode tekstu

  1. Wpisz lub wklej tekst w polu na zakładce Koduj / Dekoduj. Wynik odświeża się z każdym naciśnięciem klawisza.
  2. Wybierz Kierunek. Zakoduj zabezpiecza tekst do użycia w URL, a Dekoduj zamienia caf%C3%A9%20au%20lait z powrotem na café au lait. Wklej tekst z sekwencjami takimi jak %20 do pustego pola, a narzędzie samo przełączy się na Dekoduj (przycisk Koduj zamiast tego przełącza z powrotem). Zwykły tekst, który wymaga zakodowania, wklejony w trybie Dekoduj, w ten sam sposób przełącza na Zakoduj, z przyciskiem Dekoduj zamiast tego.
  3. Przy kodowaniu wybierz w polu Koduj jako, czym jest ten tekst (patrz następna sekcja). Domyślna opcja, Wartość parametru, pasuje do pojedynczej wartości zapytania.
  4. Kopiuj umieszcza wynik w schowku. Zamień przenosi wynik do pola wejściowego i odwraca kierunek. To szybki test w obie strony: zdekodowanie tego, co przed chwilą zakodowano, musi dać z powrotem Twój tekst.

Każdy znak zmieniony przez narzędzie jest podświetlony w wyniku. Najedź na niego kursorem, aby zobaczyć znak, jego punkt kodowy Unicode i bajty, na przykład é U+00E9 %C3%A9. Pod polami widać liczbę znaków (Znaki), bajtów (Bajty UTF-8) i znaków zakodowanych (Zakodowane znaki) albo zdekodowanych (Zdekodowane znaki). Wypróbuj przykład wczytuje zdanie Cena: 50 % taniej, kawa & łyżka żurku? Tak!, które ma 43 znaki, ale 46 bajtów UTF-8, ponieważ każda litera z ogonkiem zajmuje dwa bajty.

Przy kodowaniu opcja Każda linia osobno koduje każdą linię niezależnie i zachowuje podziały linii, co sprawdza się przy liście wartości lub odnośników. Bez niej podział linii też jest kodowany i zamienia się w %0A. Gdy tekst jest adresem URL z parametrami, narzędzie proponuje Podziel na części, co otwiera adres w zakładce parsera.

Kodowanie parametru URL, całego adresu i danych formularza

Nie każdy znak trzeba kodować wszędzie. Ukośnik rozdziela foldery w ścieżce, ale wewnątrz wartości parametru to zwykłe dane, więc właściwy wynik zależy od tego, co kodujesz. Pole Koduj jako oferuje cztery tryby:

  • Wartość parametru działa jak encodeURIComponent z JavaScriptu i pasuje do jednej wartości zapytania lub segmentu ścieżki. Koduje wszystko oprócz liter, cyfr i - _ . ! ~ * ' ( ), więc &, =, / lub ? wewnątrz wartości nie zepsują adresu. Zakodowanie café & crème daje caf%C3%A9%20%26%20cr%C3%A8me, gotowe do wstawienia po q=.
  • Cały adres URL służy do kompletnego adresu, który wymaga tylko uporządkowania. Koduje spacje, znaki spoza ASCII, znaki sterujące, odwrotny apostrof i " < > \ ^ { | }, a zachowuje wszystko, co nadaje URL strukturę: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Dlatego https://example.com/search?q=café au lait&lang=fr zamienia się w https://example.com/search?q=caf%C3%A9%20au%20lait&lang=fr. Sekwencje, które są już zakodowane, zostają bez zmian, a pojedynczy % zamienia się w %25. Tym różni się to od encodeURI z JavaScriptu, który zamienia istniejące %20 w %2520 i koduje nawiasy kwadratowe adresu IPv6, takiego jak http://[2001:db8::1]:8080/.
  • Dane formularza stosują format application/x-www-form-urlencoded (w języku angielskim), który tworzą formularze HTML i URLSearchParams. Spacja zamienia się w +, a bez kodowania zostają tylko litery, cyfry i * - . _, więc ! ' ( ) ~ też są kodowane.
  • Ścisły RFC 3986 zostawia bez kodowania wyłącznie znaki niezarezerwowane z RFC 3986 (w języku angielskim): litery, cyfry i - . _ ~. OAuth 1.0 (RFC 5849) i AWS Signature Version 4 wymagają dokładnie tej postaci, bo podpis zgadza się tylko wtedy, gdy obie strony kodują ! lub * tak samo.

Te same znaki w każdym trybie:

ZnakWartość parametruCały adres URLDane formularzaŚcisły RFC 3986
spacja%20%20+%20
&%26&%26%26
/%2F/%2F%2F
+%2B+%2B%2B
~~~%7E~
!!!%21%21
****%2A
é%C3%A9%C3%A9%C3%A9%C3%A9

Tekst jest zawsze kodowany jako UTF-8, a cyfry szesnastkowe są zawsze wielkimi literami. Jeśli wpisany tekst zawiera już sekwencje takie jak %20, pojawia się o tym informacja i przycisk Dekoduj zamiast tego, żeby nie zakodować tekstu dwa razy przez pomyłkę.

Aby przekazać JSON w parametrze zapytania, zminimalizuj go w formaterze JSON i zakoduj jako Wartość parametru: {"id":7,"tags":["a","b"]} zamienia się w %7B%22id%22%3A7%2C%22tags%22%3A%5B%22a%22%2C%22b%22%5D%7D. Działa to także w drugą stronę: zdekoduj parametr tutaj, a potem sformatuj go tam.

Problemy z URL decode: plusy, %2520 i uszkodzone sekwencje

Dekodowanie zwykle po prostu działa, ale cztery sytuacje sprawiają kłopoty. Narzędzie radzi sobie z każdą z nich zamiast zatrzymywać się z błędem:

  • Znak plus oznacza spację w danych formularza i w większości ciągów zapytania. Opcja Dekoduj + jako spację jest domyślnie włączona, więc caf%C3%A9+au+lait zostaje zdekodowane do café au lait. W całym adresie URL za spacje uznawane są tylko plusy po ?, bo w ścieżce plus jest zwykłym znakiem. Wyłącz tę opcję, gdy plus ma być dosłowny. Plus zakodowany jako %2B zawsze zostaje plusem.
  • Podwójne kodowanie zdarza się, gdy dwie warstwy kodu kodują tę samą wartość, przed czym RFC 3986 wyraźnie ostrzega. Każdy % zamienia się w %25, więc spacja z %20 staje się %2520. Jeśli zdekodowany wynik nadal zawiera sekwencje takie jak %20, narzędzie informuje, że tekst został prawdopodobnie zakodowany dwa razy, i proponuje Dekoduj ponownie.
  • Nieprawidłowa sekwencja, czyli % bez dwóch cyfr szesnastkowych po nim, jak w 100% lub %G1, powoduje, że decodeURIComponent z JavaScriptu zgłasza URIError. Tutaj takie sekwencje zostają bez zmian, są zaznaczone na czerwono i policzone, a reszta tekstu jest dekodowana.
  • Stare odnośniki w Latin-1 pochodzą z czasów przed UTF-8, gdy niektóre witryny kodowały é jako pojedynczy bajt %E9. caf%E9 nie jest poprawnym UTF-8, więc decodeURIComponent zawodzi, a unquote z Pythona zwraca caf ze znakiem zastępczym U+FFFD. Narzędzie odczytuje takie bajty jako Windows-1252, dekoduje caf%E9 do café i dodaje odpowiednią notatkę.

Znaki sterujące w zdekodowanym tekście, takie jak tabulator czy bajt zerowy, są pokazywane jako widoczne symbole, np. ␉ i ␀, ale Kopiuj kopiuje prawdziwy tekst.

Parser URL: podział adresu i edycja parametrów zapytania

Wklej adres w polu URL na zakładce Analiza i edycja URL, a zostanie podzielony na Protokół, Host, Port, Ścieżka i Fragment, a także Nazwa użytkownika i Hasło, jeśli adres je zawiera. Wartości są pokazane po zdekodowaniu, więc ta zakładka to także najszybszy sposób na zdekodowanie parametrów URL: czytasz buty męskie zamiast buty+m%C4%99skie. Edycja działa w obie strony, jak pasek adresu i tabela parametrów w Postmanie. Zmień pole, a URL zostanie od razu przepisany, poprawnie zakodowany; zmień URL, a wszystkie części zostaną odczytane na nowo. Części, których nie ruszasz, zostają dokładnie takie, jakie były, znak po znaku.

Tabela Parametry zapytania wylicza każdy parametr wraz z jego nazwą (Nazwa) i wartością (Wartość). Odznacz Uwzględnij w URL, aby pominąć parametr bez usuwania go, co pomaga, gdy szukasz tego jednego parametru, który psuje żądanie. Dodaj parametr, Usuń parametr i Sortuj od A do Z robią dokładnie to, co wskazują ich nazwy. Powtarzające się nazwy, jak tag=a&tag=b, i nazwy bez wartości, jak ?debug, są zachowywane. Spacje w parametrach decyduje, czy spacje są zapisywane jako %20, czy +; domyślnie narzędzie dopasowuje się do wklejonego adresu.

Linki do logowania i płatności często zawierają w parametrze drugi URL, zakodowany tak, aby jego własne ? i & nie myliły się z zewnętrznymi:

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

Wartość, która sama jest adresem URL, zwykle w redirect_uri, return, url lub next, dostaje przycisk Edytuj URL wewnątrz. Wewnętrzny adres https://app.example.com/callback?tab=2 otwiera się jako osobny poziom z własnymi częściami i parametrami, ścieżka nawigacyjna (Główny URL › redirect_uri) prowadzi z powrotem, a każda zmiana jest kodowana z powrotem w zewnętrznym URL. Kopiuj główny URL kopiuje wynik. Działa to na wielu poziomach zagnieżdżenia.

Gdy część po # wygląda jak parametry, jak #access_token=...&state=... w niejawnym przepływie OAuth albo #/search?q=shoes w trasach aplikacji jednostronicowych, druga tabela, Parametry we fragmencie, wylicza także je.

Parser wskazuje też problemy: adres bez protokołu, który przeglądarki traktują jak odnośnik względny; port poza zakresem od 0 do 65535; oraz znaki, które muszą być zakodowane, takie jak spacje, litery z ogonkami, " lub <, co Zakoduj je naprawia jednym kliknięciem. Tekst bez adresu, taki jak a=1&b=2, jest odczytywany jako ciąg zapytania. Dla międzynarodowej nazwy domeny narzędzie pokazuje postać Punycode, której używają DNS i przeglądarki, więc münchen.de zamienia się w xn--mnchen-3ya.de, a domena zaczynająca się od xn-- dostaje swoją czytelną postać.

Kopiuj URL kopiuje gotowy adres, Otwórz otwiera go w nowej karcie (tylko linki http i https), a Kopiuj jako JSON daje parametry jako obiekt JSON, z powtarzającymi się nazwami zebranymi w tablicę.

Jak usunąć UTM i inne parametry śledzące z adresu URL

Linki z newsletterów, reklam i sieci społecznościowych niosą parametry, które tylko informują witrynę, skąd przyszedł odwiedzający. Parametry UTM utm_source, utm_medium, utm_campaign, utm_term i utm_content pochodzą od Urchina, poprzednika Google Analytics. Identyfikatory kliknięć, takie jak fbclid (Facebook), gclid (Google Ads) i msclkid (Microsoft Advertising), dopisują same platformy.

Parser oznacza je znacznikiem śledzenie, a Usuń parametry śledzące (n) usuwa wszystkie naraz. Poza każdym parametrem utm_* rozpoznaje ponad 20 innych, takich jak ttclid (TikTok), mc_cid (Mailchimp) i _hsenc (HubSpot). Parametry potrzebne stronie zostają na miejscu: w linku do sklepu z przycisku Wypróbuj przykład polecenie Usuń parametry śledzące (4) usuwa utm_source, utm_medium, utm_campaign i fbclid, a zostawia q, size, return i fragment #reviews.

Link, który trafi do kodu QR, warto najpierw tutaj oczyścić. Bez parametrów śledzących jest krótszy, a krótszy link daje mniej gęsty kod, który łatwiej zeskanować.

Czym jest kodowanie procentowe i jak znaki zamieniają się w %XX

Kodowanie procentowe, zwane też kodowaniem URL, zapisuje znak jako % i dwie cyfry szesnastkowe. URL może zawierać tylko ograniczony zestaw znaków ASCII, a niektóre z nich mają swoją funkcję: ? zaczyna zapytanie, & rozdziela parametry, # zaczyna fragment. RFC 3986 nazywa je znakami zarezerwowanymi (: / ? # [ ] @ oraz ! $ & ' ( ) * + , ; =). Litery, cyfry i - . _ ~ są niezarezerwowane i nigdy nie wymagają kodowania. Wszystko inne, a także każdy znak zarezerwowany użyty jako zwykłe dane, jest kodowane.

Znaki spoza ASCII są najpierw zamieniane na bajty UTF-8, a każdy bajt dostaje własne %XX:

  • é to U+00E9, które UTF-8 zapisuje jako dwa bajty C3 A9, więc zamienia się w %C3%A9.
  • € to U+20AC, trzy bajty: %E2%82%AC.
  • Emoji, takie jak U+1F600 (uśmiechnięta buzia), zajmuje cztery bajty: %F0%9F%98%80.

%c3%a9 i %C3%A9 znaczą to samo, ale RFC 3986 zaleca wielkie litery, i tak pisze narzędzie. Tabela kodowania procentowego znaków, które spotyka się najczęściej:

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

URL encoding w JavaScript, Python i PHP

Każdy język ma do tego funkcje, a różnią się głównie tym, jak traktują spacje, ukośniki i ! ' ( ) * ~.

JavaScript ma encodeURIComponent (w języku angielskim) dla wartości, encodeURI dla całego adresu i URLSearchParams do kodowania formularzowego:

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 nie zamienia + na spację i zgłasza URIError przy nieprawidłowej sekwencji, takiej jak 100%.

W Pythonie te funkcje znajdują się w module urllib.parse. quote domyślnie zachowuje / (safe='/'), a poza tym koduje wszystko oprócz znaków niezarezerwowanych z RFC 3986. quote_plus zapisuje spacje jako + i koduje także /:

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'

W PHP urlencode koduje tak jak formularz HTML i zapisuje spację jako +, a rawurlencode stosuje RFC 3986 i zapisuje %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 daje taki sam wynik jak Ścisły RFC 3986. urlencode odpowiada trybowi Dane formularza z wyjątkiem *, które koduje jako %2A.

Najczęstsze pytania

Czy spację kodować jako %20, czy +?

%20 działa w URL wszędzie. + oznacza spację tylko w ciągu zapytania i w danych formularza, czyli w formacie, który wysyłają formularze HTML. W ścieżce + jest zwykłym plusem, więc /a+b pozostaje /a+b. Gdy wartość zapytania ma zawierać prawdziwy plus, zapisz go jako %2B. W narzędziu tryb Dane formularza zapisuje spacje jako +, a pozostałe trzy tryby jako %20.

Co oznaczają %20, %2F i %3D w adresie URL?

To zakodowane znaki: %20 to spacja, %2F ukośnik, a %3D znak równości. Inne, które widuje się często, to %26 (&), %3F (?), %3A (:), %2C (przecinek) i %27 (apostrof). Dwie cyfry to kod znaku w zapisie szesnastkowym. Litery z ogonkami i inne znaki spoza ASCII zajmują od dwóch do czterech takich par, jak %C3%A9 dla é. Wklej cały ciąg do dekodera, aby go odczytać.

Jaka jest różnica między encodeURI a encodeURIComponent?

encodeURI jest przeznaczone dla całego adresu i zostawia w spokoju znaki nadające mu strukturę, takie jak : / ? # & =. encodeURIComponent jest przeznaczone dla jednej części, wartości parametru lub segmentu ścieżki, i koduje także te znaki, więc https://example.com/?a=1&b=2 zamienia się w https%3A%2F%2Fexample.com%2F%3Fa%3D1%26b%3D2. W tym narzędziu Wartość parametru odpowiada encodeURIComponent, a Cały adres URL jest jak encodeURI, ale zachowuje istniejące sekwencje, takie jak %20, zamiast zamieniać je w %2520.

Jak usunąć parametry UTM z adresu URL?

Wklej link na zakładkę Analiza i edycja URL i naciśnij Usuń parametry śledzące (n). Usuwa to naraz każdy znacznik utm_* oraz identyfikatory kliknięć, takie jak fbclid i gclid. Potem naciśnij Kopiuj URL. Aby usunąć tylko niektóre z nich, użyj Usuń parametr przy wierszach, których nie chcesz.

Czy kodowanie URL to to samo co szyfrowanie albo Base64?

Nie. Kodowanie URL niczego nie ukrywa: każdy może zdekodować caf%C3%A9 z powrotem do café, więc nigdy nie chroni hasła ani tokenu. Sprawia tylko, że znaki są bezpieczne w adresie. Base64 to inne kodowanie, które zamienia dowolne dane, także pliki binarne, w ciąg 64 znaków. Ciąg Base64 w adresie URL nadal wymaga zakodowania +, / i =, chyba że użyjesz wariantu URL safe, który potrafi wygenerować koder i dekoder Base64.

Czy wklejane adresy URL są wysyłane albo zapisywane?

Nie. Kodowanie, dekodowanie i analiza działają w Twojej przeglądarce, a nic, co wklejasz, nie trafia na serwer. To ważne, bo adresy URL często zawierają tokeny dostępu, identyfikatory sesji lub kody do resetowania hasła. Przeglądarka zapamiętuje tylko wybraną zakładkę i opcje, nigdy teksty. Jedyną rzeczą, która ładuje adres, jest Otwórz, które otwiera go w nowej karcie, tak jak kliknięcie linku.

Więcej narzędzi dla programistów znajdziesz w kategorii Programiści, a narzędzia zamieniające jeden format na inny są zebrane w kategorii Konwertery. Aby znaleźć różnice między dwoma długimi adresami URL, na przykład działającym i niedziałającym wywołaniem API, wklej je do narzędzia do porównywania tekstów i porównaj znak po znaku.

Byłbym wdzięczny, gdybyś udostępnił te strony znajomym, dodał je do zakładek lub linkował do nich. Dziękuję! 🙏