Cara Encode Decode URL Online - Percent Encoding

Apa Itu URL Encoding?

URL Encoding (disebut juga percent-encoding) adalah proses mengubah special characters menjadi format yang aman untuk dikirim melalui URL. Special characters diganti dengan % diikuti kode hexadecimal ASCII.

Kenapa URL Perlu Di-Encoding?

URL hanya boleh mengandung karakter ASCII tertentu:

• ✅ Huruf: A-Z, a-z
• ✅ Angka: 0-9
• ✅ Special: -, _, ., ~

Karakter lain harus di-encode:

• ❌ Spasi → %20
• ❌ & (query separator) → %26
• ❌ = (key-value separator) → %3D
• ❌ ? (query start) → %3F
• ❌ # (fragment) → %23

Contoh URL Encoding

URL dengan Spasi

Original:  https://example.com/search?q=hello world
Encoded:   https://example.com/search?q=hello%20world

URL dengan Multiple Parameters

Original:  https://example.com/search?q=hello world&lang=id&category=books
Encoded:   https://example.com/search?q=hello%20world&lang=id&category=books

URL dengan Karakter Special

Original:  https://example.com/page?name=John&Doe&type=A+B
Encoded:   https://example.com/page?name=John%26Doe&type=A%2BB

Common URL Encodings

Fitur URL Encoder/Decoder TulisSurat

✅ Encode URL

Convert special characters ke percent-encoding.

✅ Decode URL

Kembalikan percent-encoding ke karakter asli.

✅ Auto-Convert

Convert otomatis saat mengetik (0.5 detik delay).

✅ Swap Input/Output

Tukar input/output untuk reverse operation.

✅ Copy/Download

Salin atau download hasil.

Cara Menggunakan URL Encoder

Langkah 1: Buka Tools

Kunjungi halaman URL Encoder/Decoder di TulisSurat.

Langkah 2: Pilih Mode

• Encode — untuk convert URL ke percent-encoding
• Decode — untuk convert encoded URL ke readable format

Langkah 3: Input URL

Paste atau ketik URL di kotak input.

Contoh Encode:

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

Contoh Decode:

https://example.com/search?q=hello%20world

Langkah 4: Auto Convert

Output akan muncul otomatis.

Langkah 5: Copy atau Download

Salin hasil atau download sebagai file.

Kapan Menggunakan URL Encoding?

🌐 Query Parameters

https://example.com/search?q=javascript%20tutorial&sort=relevance

📧 Email Links

mailto:email@example.com?subject=Hello%20World&body=I%20love%20TulisSurat

📱 Social Media Share

https://facebook.com/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle

🔗 API Endpoints

https://api.example.com/users?filter=name%3D%22John%20Doe%22

📄 Form Data (GET Request)

search?q=url+encoding+tutorial&category=web+development

URL Encoding vs HTML Encoding

Jangan bingung antara URL encoding dan HTML encoding:

JavaScript URL Encoding

Encode

const url = "https://example.com/search?q=hello world";
const encoded = encodeURIComponent(url);
console.log(encoded);
// https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world

Decode

const encoded = "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world";
const decoded = decodeURIComponent(encoded);
console.log(decoded);
// https://example.com/search?q=hello world

Encode URI Component vs Encode URI

const uri = "https://example.com/search?q=hello world";

encodeURIComponent(uri);
// https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world

encodeURI(uri);
// https://example.com/search?q=hello%20world

Perbedaan:

• encodeURIComponent() — Encode semua special characters
• encodeURI() — Tidak encode :, /, ?, #, &, =

URL Encoding untuk WhatsApp

Format URL WhatsApp:

https://wa.me/6281234567890?text=Hello%20saya%20tertarik%20dengan%20produk%20Anda

Manual:

https://wa.me/6281234567890?text=Hello saya tertarik dengan produk Anda

Encoded:

https://wa.me/6281234567890?text=Hello%20saya%20tertarik%20dengan%20produk%20Anda

URL Encoding untuk Google Search

Search Query:

cara membuat website dengan wordpress

Encoded URL:

https://www.google.com/search?q=cara%20membuat%20website%20dengan%20wordpress

Tips URL Encoding

1. Encode Value, Bukan Key

// ✅ Good
const key = "q";
const value = "hello world";
const url = `/search?${key}=${encodeURIComponent(value)}`;

// ❌ Bad (over-encoding)
const url = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;

2. Gunakan Library untuk Complex URLs

// Manual encoding error-prone
const params = new URLSearchParams({
  q: 'hello world',
  lang: 'id',
  category: 'web development'
});
const url = `/search?${params.toString()}`;

3. Browser Auto-Encode

Browser modern auto-encode URL di address bar, tapi untuk programming perlu manual encode!

Common Errors

❌ Double Encoding

Original:  hello%20world
Encoded:   hello%2520world  // ❌ Wrong!

❌ Decode Then Use

Jangan decode URL sebelum menggunakannya di browser/application.

❌ Encode Already Encoded Parts

// ❌ Bad
const url = "https://example.com/search?q=hello%20world";
encodeURIComponent(url);  // Double encode!

// ✅ Good
const query = "hello world";
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;

Kesimpulan

URL Encoder/Decoder adalah tools essential untuk developer web yang bekerja dengan URLs, query parameters, atau API endpoints. Dengan auto-convert dan swap features, tools ini memudahkan encode dan decode URLs.

Mulai encode decode URL sekarang di URL Encoder/Decoder!

Baca juga:

• Cara Format Validate JSON
• Cara Encode Decode Base64
• Cara Convert Warna HEX RGB HSL

💡 Tip: Gunakan encodeURIComponent() untuk query values, bukan encodeURI() untuk hasil yang lebih akurat!