Decode URI di JavaScript: Buka Kembali Data yang Terenkripsi
Pernah nggak sih nemuin URL yang kelihatan aneh karena ada simbol-simbol aneh di dalamnya? Misalnya kayak gini:
https://www.contoh.com/search?q=javascript%20tips%20%26%20tricks
Padahal kalau dilihat di browser, URL aslinya mungkin kayak gini:
https://www.contoh.com/search?q=javascript tips & tricks
Nah, inilah yang disebut encoded URI, di mana beberapa karakter tertentu diubah jadi kode khusus supaya URL tetap valid saat dikirim ke server atau dibaca oleh browser. Tapi gimana kalau kita pengen balikin URL yang udah terencode tadi ke bentuk aslinya? Jawabannya simpel: pakai decode URI di JavaScript!
Apa Itu Decode URI?
Kenapa URL Harus Di-Decode?
Dalam komunikasi internet, URL encoding sering dipakai buat menghindari masalah ketika mengirim data via URL. Beberapa karakter seperti spasi, &
, ?
, dan =
diubah menjadi format khusus (disebut percent-encoding).
Contohnya:
- Spasi (
%20
&
jadi%26
/
jadi%2F
Tapi masalahnya, kalau kita butuh membaca atau menampilkan URL dalam bentuk yang lebih mudah dipahami, kita harus decode URL dulu. Dan di JavaScript, kita bisa pakai decodeURI()
dan decodeURIComponent()
buat ngebalikin encoded URI ke bentuk aslinya.
Fungsi decodeURI()
Fungsi decodeURI()
digunakan untuk mendekode seluruh URL yang sebelumnya telah diencode dengan encodeURI()
.
Contoh Penggunaan decodeURI()
let encodedURL = "https://www.contoh.com/search?q=javascript%20tips%20%26%20tricks";
let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);
// Output: "https://www.contoh.com/search?q=javascript tips & tricks"
Lihat bedanya? Sekarang URL kembali ke bentuk normal yang lebih mudah dibaca.
✅ Gunakan decodeURI()
saat ingin membaca atau menampilkan URL dalam bentuk yang lebih manusiawi.
Fungsi decodeURIComponent()
Kalau decodeURI()
dipakai buat seluruh URL, decodeURIComponent()
digunakan buat mendekode bagian tertentu dari URL, terutama query parameters.
Contoh Penggunaan decodeURIComponent()
let encodedComponent = "javascript%20tips%20%26%20tricks";
let decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent);
// Output: "javascript tips & tricks"
Perbedaannya?
decodeURI()
nggak akan mengubah karakter yang punya arti di URL seperti?
,=
, dan&
.decodeURIComponent()
akan mendekode semua karakter spesial, termasuk?
,&
, dan=
.
✅ Gunakan decodeURIComponent()
buat decode bagian dari URL, seperti query parameter atau data yang dikirim lewat URL.
Perbandingan decodeURI()
vs decodeURIComponent()
Lihat contoh berikut biar makin paham:
let url = "https%3A%2F%2Fwww.contoh.com%2Fsearch%3Fq%3Djavascript%20tips%20%26%20tricks";
console.log(decodeURI(url));
// Output: "https://www.contoh.com/search?q=javascript%20tips%20&%20tricks"
console.log(decodeURIComponent(url));
// Output: "https://www.contoh.com/search?q=javascript tips & tricks"
Fungsi | Contoh Input | Output | Kegunaan |
---|---|---|---|
decodeURI() |
"https%3A%2F%2Fwww.contoh.com%2Fsearch%3Fq%3Djavascript%20tips%20%26%20tricks" |
"https://www.contoh.com/search?q=javascript%20tips%20&%20tricks" |
Decode seluruh URL tanpa mengubah karakter ? , & , = |
decodeURIComponent() |
"javascript%20tips%20%26%20tricks" |
"javascript tips & tricks" |
Decode bagian dari URL, termasuk ? , & , dan = |
Simpelnya:
- Gunakan
decodeURI()
buat seluruh URL. - Gunakan
decodeURIComponent()
buat bagian spesifik dari URL.
Studi Kasus: Decode URL di Aplikasi Web
Bayangkan kamu punya website yang menampilkan pencarian berdasarkan query parameters. Kalau user mencari "belajar JavaScript", maka URL-nya bakal terlihat seperti ini:
https://www.contoh.com/search?q=belajar%20JavaScript
Untuk menampilkan query yang user cari dengan format yang lebih enak dibaca, kita bisa pakai decodeURIComponent()
:
let params = "belajar%20JavaScript";
let searchQuery = decodeURIComponent(params);
console.log("Hasil Pencarian: " + searchQuery);
// Output: "Hasil Pencarian: belajar JavaScript"
Kalau kita nggak pakai decode, hasilnya bakal terlihat seperti ini:
Hasil Pencarian: belajar%20JavaScript
Yang pastinya kurang enak dilihat, kan? Makanya, fungsi decode ini penting banget buat bikin tampilan aplikasi lebih ramah pengguna.
Kesimpulan
decodeURI()
→ Cocok buat mendekode seluruh URL, tapi tetap mempertahankan karakter spesial seperti?
,&
,=
.decodeURIComponent()
→ Cocok buat mendekode bagian tertentu dari URL, seperti query parameters, dengan mengubah semua karakter spesial.
Jadi, kalau kamu lagi ngembangin aplikasi web yang berhubungan dengan URL atau data yang dikirim lewat parameter query, jangan lupa pakai fungsi decode biar data yang ditampilkan lebih nyaman dibaca!
Semoga artikel ini bikin kamu makin paham soal decode URI di JavaScript. Selamat ngoding!