Encode query pencarian
Mentah
hello world & more
Hasil encode
hello%20world%20%26%20more
Spasi menjadi %20, dan & menjadi %26 supaya tidak dikira pemisah parameter query.
Encoder / Decoder URL
Encode dan decode komponen URL dengan aman.
Terakhir diperbarui
Siap benar-benar belajar coding?
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
Apa itu URL encoder?
URL encoder (disebut juga percent-encoder atau URI encoder) mengganti karakter yang dicadangkan atau tidak aman di URL dengan % diikuti dua digit hex. Developer memakainya saat membuat query string, meng-escape segmen path, membagikan URL yang berisi spasi atau karakter non-ASCII, dan debug redirect.
URL hanya boleh berisi sekumpulan kecil karakter ASCII. Apa pun di luar kumpulan itu, entah spasi, huruf beraksen, emoji, atau simbol yang dicadangkan seperti ?, #, &, = saat dipakai sebagai data, harus di-percent-encode supaya selamat dalam perjalanan dari browser ke server.
JavaScript menyediakan dua fungsi encoding: encodeURI (mempertahankan struktur URL: /, ?, #, &) dan encodeURIComponent (meng-encode semua karakter yang dicadangkan). Pakai encodeURIComponent untuk *nilai* yang kamu masukkan ke query string, dan encodeURI untuk *URL utuh* yang ingin tetap berfungsi.
Yang kamu pelajari saat meng-encode URL
- Percent-encoding mengganti satu byte dengan
%ditambah dua digit hex. Misalnya, spasi menjadi%20. - Karakter yang dicadangkan (
:/?#&=+) punya makna dalam struktur URL. Karakter itu harus di-encode saat dipakai sebagai data, bukan sebagai pemisah. - Teks non-ASCII (huruf beraksen, emoji, Sirilik, CJK) lebih dulu diubah menjadi byte UTF-8, lalu setiap byte di-percent-encode.
encodeURImenjaga struktur URL tetap utuh;encodeURIComponentmeng-encode semua karakter yang dicadangkan. Pakai yang tepat di tempat yang tepat.
Cara meng-encode dan men-decode URL langkah demi langkah
Pilih arahnya
Pilih Encode kalau kamu punya teks mentah dan ingin membuatnya aman untuk URL. Pilih Decode kalau kamu punya string yang di-encode dengan
%dan ingin mendapatkan teks aslinya kembali.Pilih mode encoding
Pilih
encodeURIComponent(meng-encode semua karakter yang dicadangkan) untuk nilai query string; pilihencodeURI(mempertahankan struktur) untuk URL utuh.Tempel input-mu
Tempel teks mentah atau URL yang sudah di-encode. Input beberapa baris bisa dipakai untuk decode sekaligus banyak.
Salin hasilnya
Salin nilai yang sudah di-encode atau di-decode. Konversinya berjalan secara lokal di browser kamu, jadi data rahasia di URL tetap ada di perangkatmu.
Referensi cepat encoding URL yang umum
Karakter yang paling sering kamu lihat di-encode, beserta bentuk percent-encoding-nya. Makna karakter yang dicadangkan berasal dari RFC 3986.
| Karakter | Hasil encode | Alasan |
|---|---|---|
| spasi | %20 | Spasi tidak boleh ada di URL |
! | %21 | Dicadangkan oleh sebagian server |
# | %23 | Menandai awal fragment |
$ | %24 | Karakter yang dicadangkan |
& | %26 | Memisahkan parameter query |
+ | %2B | Berarti spasi di body yang di-encode sebagai formulir |
/ | %2F | Pemisah path |
: | %3A | Memisahkan scheme dan host |
= | %3D | Memisahkan key dari value di query string |
? | %3F | Menandai awal query string |
@ | %40 | Memisahkan userinfo dan host |
| Byte UTF-8 | %C3%A9 | Setiap byte non-ASCII di-encode |
Contoh encoding URL untuk dicoba
Encode karakter non-ASCII
Mentah
café
Hasil encode
caf%C3%A9
é adalah urutan byte UTF-8 0xC3 0xA9, jadi bentuk hasil encode-nya punya *dua* grup %XX untuk satu karakter itu.
encodeURI vs encodeURIComponent
Mentah
https://example.com/path?q=hello world
encodeURI
https://example.com/path?q=hello%20world
encodeURIComponent
https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world
encodeURI menjaga struktur URL tetap utuh (garis miring, ?, =). encodeURIComponent meng-encode semua karakter yang dicadangkan. Pakai untuk nilai yang kamu taruh di dalam query string, jangan pernah untuk URL utuh.
Kesalahan umum saat encoding URL
- Memakai
encodeURIuntuk nilai query string.&dan=lolos dari encoding dan merusak pembacaan parameter. - Meng-encode URL dua kali.
%2520alih-alih%20adalah tanda klasik bug double-encoding. - Lupa bahwa
+berarti spasi di bodyapplication/x-www-form-urlencoded, tapi berarti+apa adanya di path atau query URL. - Menggabungkan input pengguna mentah ke dalam URL dengan interpolasi string. Selalu encode nilainya lebih dulu.
- Mengira
decodeURIComponentmenerima string apa pun. Fungsi itu melempar error pada karakter%tunggal yang tidak diikuti dua digit hex.
FAQ Encoding URL
Apa itu URL encoding?
URL encoding (disebut juga percent-encoding) adalah cara menuliskan karakter yang punya makna khusus di URL, atau yang tidak aman untuk dikirim, dengan menggantinya memakai
% diikuti dua digit hex.Apa bedanya encodeURI dan encodeURIComponent?
encodeURI mempertahankan karakter struktur URL (/, ?, #, &, =, +). encodeURIComponent meng-encode semuanya, dan itulah yang kamu butuhkan untuk *nilai* individual di dalam URL, seperti nilai parameter query, segmen path, dan fragment. Lihat referensi MDN untuk encodeURI dan encodeURIComponent.Kenapa spasi menjadi %20?
Spasi tidak boleh ada di URL, jadi diganti dengan
%20, yaitu percent-encoding dari karakter spasi ASCII (0x20 dalam hex).Kapan saya perlu melakukan URL encoding?
Encode setiap nilai dari pengguna atau nilai dinamis sebelum memasukkannya ke URL: nilai query string, segmen path, tujuan redirect, parameter OAuth. Jangan pernah percaya bahwa input mentah sudah aman untuk URL.
Apakah URL encoding bisa dikembalikan?
Bisa, itulah URL decoding.
decodeURI, decodeURIComponent, atau URL decoder apa pun mengembalikan percent-encoding ke karakter aslinya.