Εργασία με URL στην JavaScript

Στην JavaScript μερικές φορές χρειάζεται να δουλέψουμε με διευθύνσεις συνδέσμων. Για αυτό προορίζεται η κλάση URL, που επιτρέπει την απόκτηση και αλλαγή τμημάτων διευθύνσεων.

Ας δούμε τη λειτουργία της με το παράδειγμα της ακόλουθης διεύθυνσης:

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

Ας δημιουργήσουμε ένα αντικείμενο της κλάσης URL, περνώντας του ως παράμετρο τη διεύθυνσή μας:

let url = new URL(path);

Ας δούμε ποιες ιδιότητες έχει το δημιουργημένο αντικείμενο.

Πρωτόκολλο

Με τη βοήθεια της ιδιότητας protocol μπορούμε να πάρουμε το πρωτόκολλο:

let res = url.protocol;
console.log(res); // θα εμφανίσει 'http://'

Host

Με τη βοήθεια της ιδιότητας host μπορούμε να πάρουμε το όνομα domain με τη θύρα:

let res = url.host;
console.log(res); // θα εμφανίσει 'site.ru:3000'

Όνομα host

Με τη βοήθεια της ιδιότητας hostname μπορούμε να πάρουμε το όνομα domain:

let res = url.hostname;
console.log(res); // θα εμφανίσει 'site.ru'

Θύρα

Με τη βοήθεια της ιδιότητας port μπορούμε να πάρουμε τη θύρα:

let res = url.port;
console.log(res); // θα εμφανίσει '3000'

Μονοπάτι

Με τη βοήθεια της ιδιότητας pathname μπορούμε να απορρίψουμε το όνομα domain, παίρνοντας το μονοπάτι:

let res = url.pathname;
console.log(res); // θα εμφανίσει '/dir/eee/page.html#show?a=1&b=2&c=3'

Hash

Με τη βοήθεια της ιδιότητας hash μπορούμε να πάρουμε την τιμή hash:

let res = url.hash;
console.log(res); // θα εμφανίσει 'show'

Παράμετροι GET

Με τη βοήθεια της ιδιότητας search μπορούμε να πάρουμε τη συμβολοσειρά παραμέτρων GET:

let res = url.search;
console.log(res); // θα εμφανίσει 'a=1&b=2&c=3'

Με τη βοήθεια της ιδιότητας searchParams μπορούμε να πάρουμε τις παραμέτρους GET σε μορφή αντικειμένου της κλάσης URLSearchParams:

let res = url.searchParams;
console.log(res); // θα εμφανίσει αντικείμενο της κλάσης URLSearchParams