Yerleşik URL Ayrıştırıcılı URL Kodlayıcı ve Çözücü

URL Kodlama (Yüzde Kodlama) Nedir?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Temel Özellikler

Örnekler

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Nasıl Kullanılır

1. 1

   URL veya Kodlu Dize Girin

   Kodlamak için çözülmüş alana bir URL yapıştırın veya çözmek için kodlu alana yüzde kodlu bir dize yapıştırın. Kullanım durumunuza göre encodeURI veya encodeURIComponent modunu seçin.

2. 2

   Sonuçları ve Ayrıştırılan Yapıyı Görün

   Siz yazdıkça diğer alan anında güncellenir. URL ayrıştırıcısı URL'yi protokol, ana bilgisayar, port, yol, sorgu parametreleri ve fragment olarak ayırır — hepsi düzenlenebilir.

3. 3

   Kopyala veya Yeniden Oluştur

   Kodlanmış veya çözülmüş sonucu kopyalamak için Kopyala düğmesine tıklayın. URL bileşenlerini tek tek düzenleyin ve değiştirilen parçalardan yeni bir URL inşa etmek için Yeniden Oluştur düğmesine tıklayın.

Yaygın Hatalar

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Yaygın Kullanım Senaryoları

Bozuk URL'lerde Hata Ayıklama

Sunucu günlüklerinden, hata mesajlarından veya tarayıcı geliştirici araçlarından gelen yüzde kodlu URL'leri çözerek özgün, insan tarafından okunabilir metni okuyun.

API Geliştirme

REST API çağrıları için sorgu parametre değerlerini kodlayın; &, = ve boşluk gibi özel karakterlerin istek URL'sini bozmamasını sağlayın.

OAuth Akışı Kurulumu

Kimlik doğrulama hatalarını önlemek için OAuth yetkilendirme URL'lerinde redirect_uri ve diğer URL parametrelerini doğru biçimde kodlayın.

Uluslararası URL'ler

Uluslararasılaştırılmış web uygulamaları için Çince, Japonca, Korece, Arapça veya diğer ASCII dışı karakterler içeren URL'leri kodlayın ve çözün.

Pazarlama Bağlantısı Çözümlemesi

E-posta kampanyaları ve reklam platformlarındaki izleme URL'lerini çözerek gömülü UTM parametrelerini ve yönlendirme zincirlerini anlayın.

URL Yapısı İncelemesi

Karmaşık URL'leri bileşen parçalarına — protokol, ana bilgisayar, port, yol, sorgu parametreleri ve fragment — ayırarak çözümleyin ve değiştirin.

Teknik Ayrıntılar

RFC 3986 Ayrılmış ve Ayrılmamış Karakterler

RFC 3986, hiçbir zaman kodlama gerektirmeyen ayrılmamış karakterleri (A-Z, a-z, 0-9, -, ., _, ~) ve URI ayırıcı görevi gören, veri olarak kullanıldıklarında yüzde kodlanması gereken ayrılmış karakterleri (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) tanımlar.

UTF-8 Bayt Kodlama Akışı

ASCII dışı karakterler önce Unicode kod noktasına dönüştürülür, ardından UTF-8 baytları olarak (kod noktası aralığına göre 1-4 bayt) kodlanır ve son olarak her bayt %XX olarak yüzde kodlanır. Örneğin: é (U+00E9) → UTF-8 baytları C3 A9 → %C3%A9. 🎉 emojisi (U+1F389) → UTF-8 baytları F0 9F 8E 89 → %F0%9F%8E%89.

URL ile URI Terminolojisi

URI (Uniform Resource Identifier), her tanımlayıcı dize için genel terimdir. URL (Uniform Resource Locator), ayrıca erişim mekanizmasını (https:// gibi) belirten bir URI'dir. RFC 3986'daki kodlama kuralları tüm URI'ler için geçerlidir. JavaScript API'si URI terminolojisini kullanır (encodeURI, decodeURI); günlük kullanım ise URL'yi tercih eder.

En İyi Uygulamalar

İş İçin Doğru Modu Seçin

Tek tek sorgu parametre anahtarları ve değerleri için encodeURIComponent() kullanın. encodeURI() yalnızca elinizde tam bir URL varken ve yapısını bozmadan güvenli olmayan karakterleri kodlamak istediğinizde kullanın. & veya = ya da diğer ayrılmış karakterleri içerebilecek parametre değerlerinde encodeURI() kullanmayın.

Çift Kodlamadan Kaçının

Bir dizeyi kodlamadan önce zaten kodlu olup olmadığını kontrol edin. Mevcut % dizilerini arayın. Hâlihazırda kodlu bir dizeyi kodlamak %20'yi %2520'ye, %3D'yi %253D'ye ve benzerine çevirir. Emin değilseniz önce çözün, sonra bir kez kodlayın.

Sunucu Tarafında Çözün

Çoğu web çatısı, URL parametrelerini uygulama kodunuz görmeden önce otomatik olarak çözer. Çatınızın çoktan çözdüğü parametreleri elle yeniden çözmekten kaçının — özgün değer düz yüzde dizileri içeriyorsa bu sorunlara yol açabilir.

OAuth ve API İmzalama için Değerleri Kodlayın

OAuth 1.0 imza temel dizeleri ve birçok API imzalama algoritması katı RFC 3986 yüzde kodlaması gerektirir. encodeURIComponent() kullanın; ardından spesifikasyon gerektiriyorsa kodlanmamış kalan karakterleri (!, ', (, ), * gibi) yüzde kodlu eşdeğerleriyle değiştirin.

Sık Sorulan Sorular