Kodowanie URL

Powiązane Rekomendacje

Przypadki użycia

• Debugowanie parametrów API: porównywanie wyników encodeURIComponent i encodeURI w celu rozwiązania problemów z niezgodnością podpisów interfejsu
• Dekodowanie logów: wsadowe dekodowanie zakodowanej zawartości URL w logach w celu przywrócenia czytelnego tekstu
• Budowanie URL: tryb Query Only zachowuje nazwy kluczy i koduje tylko wartości, unikając błędów formatu przy ręcznej konkatenacji
• Rozwój frontendowy: podświetlanie pomaga zrozumieć, które znaki są escapowane, przydatne do debugowania przekierowań stron
• Migracja danych: wsadowe przetwarzanie zakodowanych danych URL eksportowanych ze starszych systemów w celu konwersji na nowy format

Funkcje

• Cztery tryby kodowania: przełączanie między encodeURIComponent / encodeURI / full / RFC 3986 jednym kliknięciem, porównywanie różnic wyników w czasie rzeczywistym
• Podświetlanie kodowania: podświetla escapowane znaki %XX w czasie rzeczywistym, bursztynowe oznaczenie sprawia, że wyniki kodowania są widoczne od razu
• Tryb wsadowy: obsługa wieloliniowego wsadowego kodowania/dekodowania, każda linia przetwarzana niezależnie, idealne dla logów lub danych masowych
• Tryb Query Only: koduje tylko część wartości parametrów URL (po znaku równości), pozostawiając nazwy kluczy, znaki i strukturę ścieżki nietkniętymi
• Debounce w czasie rzeczywistym: automatyczne kodowanie/dekodowanie w ciągu 300 ms, nie trzeba klikać przycisków, wyniki pojawiają się podczas pisania
• Licznik znaków: wyświetla liczbę wprowadzonych znaków w czasie rzeczywistym, przydatne do sprawdzania ograniczeń długości parametrów API

Jak Używać

1. Wprowadź lub wklej URL lub tekst do zakodowania/odkodowania
2. Wybierz kierunek kodowania (Koduj/Dekoduj) i tryb (Component / URI / full / RFC 3986)
3. Włącz tryb wsadowy dla danych wieloliniowych lub Query Only dla kodowania tylko wartości parametrów
4. Sprawdź podświetlony wynik i skopiuj zakodowany ciąg do użycia w wywołaniach API lub budowaniu URL

Często Zadawane Pytania

Co to jest kodowanie URL?

术语表

Kodowanie procentowe (Percent-encoding)

Oficjalna nazwa kodowania URL, metoda kodowania reprezentująca znaki za pomocą % po którym następują dwie cyfry szesnastkowe. Np. spacja staje się %20, chiński znak '中' staje się %E4%B8%AD.Wikipedia - Percent-encoding

encodeURIComponent

Wbudowana funkcja JavaScript, koduje wszystkie znaki z wyjątkiem A-Z a-z 0-9 - _ . ! ~ * ' ( ). Najczęściej używana do kodowania pojedynczych wartości parametrów zapytania.

encodeURI

Wbudowana funkcja JavaScript, zachowuje znaki strukturalne URL (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) i koduje tylko znaki, które rzeczywiście wymagają kodowania. Służy do kodowania pełnych URL.

RFC 3986

Najnowszy standard IETF dla ogólnej składni URI (2005), definiuje reguły kodowania URL i klasyfikuje tyldę ~ jako znak niezarezerwowany (nie wymaga kodowania). Zastępuje stare RFC 2396 i RFC 1738.RFC 3986

Znaki zarezerwowane (Reserved Characters)

Znaki o specjalnym znaczeniu w URL, takie jak : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Te znaki muszą być kodowane, gdy są używane jako dane, ale nie w swoich pozycjach strukturalnych.

Znaki niezarezerwowane (Unreserved Characters)

Bezpieczne znaki, które mogą być używane w dowolnej pozycji URL bez kodowania, w tym A-Z, a-z, 0-9, -, _, ., ~ (zgodnie z RFC 3986).

Query String

Część URL po ?, składająca się z par klucz=wartość oddzielonych &. Np. w ?name=张三&age=20 name=张三 i age=20 to dwa parametry.

URLSearchParams

API dostarczane przez nowoczesne przeglądarki do wygodnego budowania i parsowania query string URL, z automatyczną obsługą kodowania i dekodowania. Bardziej bezpieczne i niezawodne niż ręczna konkatenacja ciągów.

application/x-www-form-urlencoded

Domyślny format wysyłania formularzy HTML, w którym spacje są kodowane jako + zamiast %20, co nieco różni się od encodeURIComponent. Frameworki serwerowe zwykle obsługują oba formaty automatycznie.

Kodowanie UTF-8

Standardowa metoda kodowania znaków w sieci. Podczas kodowania URL znaki nie-ASCII (takie jak chińskie, emoji) są najpierw konwertowane na sekwencje bajtów UTF-8, a następnie każdy bajt jest kodowany w formacie %XX.

Porównanie znaków escapowanych w 4 trybach kodowania

Szybka ściągawka z powszechnymi zarezerwowanymi znakami URL

Code Examples

// encodeURIComponent: koduje pojedyncze wartości parametrów (najczęściej używane)
const param = encodeURIComponent('张三&李四');
console.log(param); // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

// encodeURI: koduje pełny URL (zachowuje znaki strukturalne :/?#&=)
const url = encodeURI('https://example.com/search?q=witaj świecie');
console.log(url);

// Dekodowanie
const decoded = decodeURIComponent(param);
console.log(decoded); // 张三&李四

// Kompatybilność z RFC 3986 (~ nie kodowane)
function rfc3986Encode(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

// API URLSearchParams (nowoczesny sposób, automatyczne kodowanie)
const params = new URLSearchParams({ name: '张三', city: '北京' });
console.log(params.toString());
// name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

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

# quote: podobnie jak encodeURIComponent
encoded = quote('张三&李四')
print(encoded)  # %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

# Tryb RFC 3986 (~ domyślnie nie kodowane)
print(quote('hello~world'))  # hello~world

# quote_plus: spacje kodowane jako + (format formularza)
print(quote_plus('hello world'))  # hello+world

// Dekodowanie
print(unquote(encoded))  # 张三&李四

// urlencode: budowanie query string
params = urlencode({'name': '张三', 'city': '北京'})
print(params)
# name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.net.URI;
import java.nio.charset.StandardCharsets;

public class URLEncodeExample {
    public static void main(String[] args) throws Exception {
        // Kodowanie URL (URLEncoder - format formularza, spacje stają się +)
        String encoded = URLEncoder.encode("张三&李四", "UTF-8");
        System.out.println(encoded);
        // %E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B

        // Dekodowanie
        String decoded = URLDecoder.decode(encoded, "UTF-8");
        System.out.println(decoded); // 张三&李四

        // Budowanie pełnego URL (klasa URI obsługuje kodowanie automatycznie)
        URI uri = new URI("https", "example.com", "/search", "q=witaj", null);
        System.out.println(uri.toASCIIString());
    }
}

Authoritative References

• ReferenceRFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• ReferenceRFC 1738 - Uniform Resource Locators (URL)
• ReferenceMDN Web Docs - encodeURIComponent()
• ReferenceMDN Web Docs - encodeURI()
• ReferenceWikipedia - Percent-encoding