Cara Parse URL di JavaScript: Panduan Praktis dan Efektif

Metode Parsing URL dengan URL API

Cara paling efisien dan standar untuk melakukan parsing URL di JavaScript modern adalah dengan menggunakan objek URL. API ini tersedia secara bawaan di semua browser modern dan lingkungan Node.js, sehingga Anda tidak memerlukan library eksternal seperti query-string untuk kebutuhan dasar.

const urlString = 'https://azwinn.com/artikel?kategori=teknologi&id=123#top';
const url = new URL(urlString);

console.log(url.hostname); // "azwinn.com"
console.log(url.pathname); // "/artikel"
console.log(url.searchParams.get('kategori')); // "teknologi"

Komponen Objek URL

Saat Anda menginisialisasi new URL(), JavaScript akan memecah string URL menjadi properti-properti yang dapat diakses secara langsung. Berikut adalah tabel rincian properti yang tersedia:

Mengelola Query Parameters

Untuk kebutuhan manipulasi data query, gunakan URLSearchParams. Objek ini menyediakan metode untuk menambah, menghapus, atau mengubah parameter secara dinamis.

const params = new URLSearchParams(url.search);

// Menambah parameter baru
params.append('sort', 'asc');

// Mengubah parameter
params.set('id', '456');

// Menghapus parameter
params.delete('kategori');

console.log(params.toString()); // "id=456&sort=asc"

Tips Troubleshooting

• Validasi URL: Selalu gunakan blok try...catch saat melakukan parsing URL dari input pengguna untuk menghindari error jika format URL tidak valid.
• Dukungan Browser: URL API didukung penuh di semua browser modern (Chrome, Firefox, Safari, Edge). Untuk Internet Explorer, Anda memerlukan polyfill.
• Relative URL: Jika Anda ingin memparsing URL relatif, Anda harus memberikan base URL sebagai argumen kedua: new URL('/path', 'https://domain.com').