URL Encoder & Decoder dengan URL Parser Bawaan

Apa Itu URL Encoding (Percent Encoding)?

// 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'

Fitur Utama

Contoh

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

Cara Menggunakan

1. 1

   Masukkan URL atau String yang Di-encode

   Tempel URL di area decoded untuk meng-encode-nya, atau tempel string yang di-encode dengan persen di area encoded untuk mendecode-nya. Pilih mode encodeURI atau encodeURIComponent tergantung pada kasus penggunaan Anda.

2. 2

   Lihat Hasil dan Struktur yang Diparse

   Area lainnya diperbarui secara instan saat Anda mengetik. URL parser memecah URL menjadi protokol, host, port, path, parameter query, dan fragment — semuanya dapat diedit.

3. 3

   Salin atau Bangun Ulang

   Klik Salin untuk menyalin hasil encoded atau decoded. Edit komponen URL individual dan klik Bangun Ulang untuk membangun URL baru dari bagian yang dimodifikasi.

Kesalahan Umum

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')

Kasus Penggunaan Umum

Men-debug URL yang Rusak

Decode URL yang di-encode dengan persen dari log server, pesan error, atau dev tools browser untuk membaca teks asli yang dapat dibaca manusia.

Pengembangan API

Encode nilai parameter query untuk panggilan REST API, memastikan karakter khusus seperti &, =, dan spasi tidak merusak URL permintaan.

Setup Alur OAuth

Encode redirect_uri dan parameter URL lainnya dengan benar di URL otorisasi OAuth untuk mencegah kegagalan autentikasi.

URL Internasional

Encode dan decode URL yang mengandung karakter Cina, Jepang, Korea, Arab, atau non-ASCII lainnya untuk aplikasi web internasional.

Analisis Tautan Marketing

Decode URL pelacakan dari kampanye email dan platform iklan untuk memahami parameter UTM dan rantai redirect yang disematkan.

Inspeksi Struktur URL

Parse URL kompleks menjadi bagian komponennya — protokol, host, port, path, parameter query, dan fragment — untuk analisis dan modifikasi.

Detail Teknis

Karakter Reserved & Unreserved RFC 3986

RFC 3986 mendefinisikan karakter unreserved (A-Z, a-z, 0-9, -, ., _, ~) yang tidak pernah perlu di-encode, dan karakter reserved (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) yang berfungsi sebagai pembatas URI dan harus di-encode dengan persen ketika digunakan sebagai data.

Alur Encoding Byte UTF-8

Karakter non-ASCII pertama dikonversi ke code point Unicode mereka, kemudian di-encode sebagai byte UTF-8 (1-4 byte tergantung pada rentang code point), dan akhirnya setiap byte di-encode dengan persen sebagai %XX. Misalnya: é (U+00E9) → byte UTF-8 C3 A9 → %C3%A9. Emoji 🎉 (U+1F389) → byte UTF-8 F0 9F 8E 89 → %F0%9F%8E%89.

Terminologi URL vs URI

URI (Uniform Resource Identifier) adalah istilah umum untuk string pengenal apa pun. URL (Uniform Resource Locator) adalah URI yang juga menentukan mekanisme akses (seperti https://). Aturan encoding di RFC 3986 berlaku untuk semua URI. API JavaScript menggunakan terminologi URI (encodeURI, decodeURI), sementara penggunaan sehari-hari lebih menyukai URL.

Praktik Terbaik

Gunakan Mode yang Tepat untuk Pekerjaan

Gunakan encodeURIComponent() untuk kunci dan nilai parameter query individual. Gunakan encodeURI() hanya ketika Anda memiliki URL lengkap dan ingin meng-encode karakter yang tidak aman tanpa merusak strukturnya. Jangan pernah gunakan encodeURI() pada nilai parameter yang mungkin mengandung &, =, atau karakter reserved lainnya.

Hindari Double Encoding

Sebelum meng-encode string, periksa apakah sudah di-encode. Cari urutan % yang ada. Meng-encode string yang sudah di-encode mengubah %20 menjadi %2520, %3D menjadi %253D, dan seterusnya. Jika tidak yakin, decode dulu, lalu encode sekali.

Decode di Sisi Server

Sebagian besar framework web secara otomatis mendecode parameter URL sebelum kode aplikasi Anda melihatnya. Hindari mendecode parameter secara manual yang sudah didecode oleh framework — ini dapat menyebabkan masalah jika nilai asli mengandung urutan persen literal.

Encode Nilai untuk OAuth dan API Signing

String dasar signature OAuth 1.0 dan banyak algoritma signing API memerlukan percent encoding RFC 3986 yang ketat. Gunakan encodeURIComponent() dan kemudian ganti karakter yang tersisa yang tidak di-encode (seperti !, ', (, ), *) dengan padanan yang di-encode dengan persen jika spesifikasi mengharuskannya.

Pertanyaan yang Sering Diajukan