Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

JavaScriptでURLの内容を取得する方法

JavaScriptでURLの内容を取得する方法

画像出典:MDN

JavaScriptを使ってページのURLの内容を取得する方法について説明します。

取得したい内容によって記述方法が違うので、目的に応じてそれぞれ記述方法を確認してみてください。

 

目次

URL全体を取得したい場合

// URL全体取得
var url = location.href

出力結果

https://www.debriefing-web.com/entry/javascript-get-url

ドメイン(ホスト)を取得したい場合

// ドメイン(ホスト)の取得
var host = location.hostname;

出力結果

www.debriefing-web.com

パスを取得したい場合

// パスの取得
var path = location.pathname;

出力結果

/entry/javascript-get-url

URLのパラメーターを取得したい場合

// パラメーターの取得
var parameter = location.search;

出力結果

?_ga=2.22355384.2034436735.1553910114-2128674471.1553910114

URLのアンカー(#以降)取得したい場合

// ページ内アンカーの取得
var anchor = location.hash;

出力結果

#content1