Bekerja dengan URL di JavaScript

Di JavaScript, terkadang kita harus bekerja dengan alamat tautan. Untuk ini, ada kelas URL yang memungkinkan untuk mendapatkan dan mengubah bagian dari alamat.

Mari kita lihat cara kerjanya dengan contoh alamat berikut:

let path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

Mari buat objek dari kelas URL dengan memberikan alamat kita sebagai parameternya:

let url = new URL(path);

Mari kita lihat properti apa saja yang dimiliki oleh objek yang dibuat.

Protokol

Dengan menggunakan properti protocol, kita bisa mendapatkan protokol:

let res = url.protocol;
console.log(res); // akan menampilkan 'http://'

Host

Dengan menggunakan properti host, kita bisa mendapatkan nama domain dengan port:

let res = url.host;
console.log(res); // akan menampilkan 'site.ru:3000'

Nama Host

Dengan menggunakan properti hostname, kita bisa mendapatkan nama domain:

let res = url.hostname;
console.log(res); // akan menampilkan 'site.ru'

Port

Dengan menggunakan properti port, kita bisa mendapatkan port:

let res = url.port;
console.log(res); // akan menampilkan '3000'

Path

Dengan menggunakan properti pathname, kita bisa menghilangkan nama domain, dan mendapatkan path-nya:

let res = url.pathname;
console.log(res); // akan menampilkan '/dir/eee/page.html#show?a=1&b=2&c=3'

Hash

Dengan menggunakan properti hash, kita bisa mendapatkan nilai hash:

let res = url.hash;
console.log(res); // akan menampilkan 'show'

Parameter GET

Dengan menggunakan properti search, kita bisa mendapatkan string parameter GET:

let res = url.search;
console.log(res); // akan menampilkan 'a=1&b=2&c=3'

Dengan menggunakan properti searchParams, kita bisa mendapatkan parameter GET dalam bentuk objek dari kelas URLSearchParams:

let res = url.searchParams;
console.log(res); // akan menampilkan objek dari kelas URLSearchParams