JavaScript

現在のページのURL情報を取得・整形するlocation【JavaScript】

現在のページのURL情報を取得し、整形するlocationについてを紹介します。

【基本形】現在のURL情報の取得

現在のURLを取得するには

location.href

を使います。

下記がデモです。「取得」をクリックすると、現在のURLが取得できます。

現在のURLは：

ソースコードは下記です。

function getURL() {
  var url = location.href;
  document.getElementById('lcthref').innerHTML = url;
}
<input type="button" value="取得" onclick="getURL()">
<p>現在のURLは：<span id="lcthref"></span></p>

location.hrefを利用して、現在のページのURLをクリップボードにコピーしたりできるようになります。

≫URLとタイトルをクリップボードにコピーする【JavaScript】

URL情報を整形する

そのほかにもURLの一部を取得したり、区切ったりできるプロパティもあります。

主なものとして下記のようなものがあります。

  • location.href
  • location.protocol
  • location.hostname
  • location.pathname

それぞれどのような情報を取得するか見てみましょう。

現在のURL情報は：

function getINFO() {
  var urlinfo = '';
  urlinfo += "【location.href】" + location.href + "<br>";
  urlinfo += "【location.protocol】" + location.protocol + "<br>";
  urlinfo += "【location.hostname】" + location.hostname + "<br>";
  urlinfo += "【location.pathname】" + location.pathname + "<br>";

  document.getElementById('url_info').innerHTML = urlinfo;
}
<input type="button" value="取得" onclick="getINFO()">
<p>現在のURL情報は：<br><span id="url_info"></span></p>

その他にも

  • location.search
    '?' と'?'に続くパラメーターを取得します。
  • location.hash
    '#' と'#'に続く識別子を取得します。

などがあります。

「URLを分割し、付与されるパラメータを取得する」のようにパラメータが付与されているURLからIDなどを取り出したい場合に、location.searchは大活躍します。

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2024 ウェブつく Powered by AFFINGER5