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:

javascriptlet 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:

javascriptlet 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:

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

Host

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

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

Nama Host

Dengan menggunakan properti hostname, kita bisa mendapatkan nama domain:

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

Port

Dengan menggunakan properti port, kita bisa mendapatkan port:

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

Path

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

javascriptlet 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:

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

Parameter GET

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

javascriptlet 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:

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