JavaScriptでURLを取得する5つの方法

はじめに
●JavaScriptでURLを取得する方法
●応用例とサンプルコード
- ○応用例1：URLからパラメータを取得する
- ○応用例2：URLにパラメータを追加する
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでURLを取得する方法が身につくでしょう。

●JavaScriptでURLを取得する方法

ここでは、JavaScriptでURLを取得する5つの方法を紹介します。

○方法1：window.location.hrefを使用する

window.location.hrefを使って現在のURLを取得するコードを紹介します。

この例では、現在のURLを表示しています。

const currentURL = window.location.href;
console.log(currentURL);

○方法2：document.URLを使用する

document.URLを使って現在のURLを取得するコードを紹介します。

この例では、現在のURLを表示しています。

const currentURL = document.URL;
console.log(currentURL);

○方法3：window.locationオブジェクトを利用する

window.locationオブジェクトを利用して、URLの様々な情報を取得するコードを紹介します。

この例では、プロトコル、ホスト名、パス名、クエリパラメータを取得しています。

const protocol = window.location.protocol;
const host = window.location.host;
const pathname = window.location.pathname;
const search = window.location.search;

console.log(protocol, host, pathname, search);

○方法4：URLSearchParamsを活用する

URLSearchParamsを活用して、URLのクエリパラメータを取得するコードを紹介します。

この例では、URLのクエリパラメータを取得し、表示しています。

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.toString());

○方法5：相対URLから絶対URLに変換する

相対URLから絶対URLに変換するコードを紹介します。

この例では、相対URLを現在のページのURLに基づいて絶対URLに変換しています。

function toAbsoluteURL(relativeURL) {
  const anchor = document.createElement('a');
  anchor.href = relativeURL;
  return anchor.href;
}

const relativeURL = './sample.html';
const absoluteURL = toAbsoluteURL(relativeURL);
console.log(absoluteURL);

●応用例とサンプルコード

ここでは、JavaScriptでURLを取得する方法を応用した例を紹介します。

○応用例1：URLからパラメータを取得する

URLからパラメータを取得するコードを紹介します。

この例では、URLのクエリパラメータから特定のキーの値を取得しています。

function getURLParameter(key) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(key);
}

const value = getURLParameter('sample_key');
console.log(value);

○応用例2：URLにパラメータを追加する

URLにパラメータを追加するコードを紹介します。

この例では、既存のURLに新たなクエリパラメータを追加しています。

function addURLParameter(key, value) {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  return url.toString();
}

const newURL = addURLParameter('new_key', 'new_value');
console.log(newURL);