JavaScriptにおけるURLの操作

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プロパティを使用して、ポートを含むドメイン名を取得できます：

let res = url.host;
console.log(res); // 'site.ru:3000' と出力されます

hostnameプロパティを使用して、ドメイン名を取得できます：

let res = url.hostname;
console.log(res); // 'site.ru' と出力されます

portプロパティを使用して、ポートを取得できます：

let res = url.port;
console.log(res); // '3000' と出力されます

pathnameプロパティを使用して、ドメイン名を除いたパスを取得できます：

let res = url.pathname;
console.log(res); // '/dir/eee/page.html#show?a=1&b=2&c=3' と出力されます

hashプロパティを使用して、ハッシュの値を取得できます：

let res = url.hash;
console.log(res); // 'show' と出力されます

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クラスのオブジェクトを出力します