MENU

JavaScript

jQueryでURLやパラメータを取得する

ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

直近の案件でJavaScriptでURLを取得して処理をすることがありました。
毎回調べているので、自分用にメモを残しておきたいと思います。

この記事の見出し
  1. 現在のURLを取得する
  2. URLのプロトコルを取得する
  3. URLのホスト名を取得する
  4. URLのホスト名を取得する（ポート番号も含む）
  5. URLのポート番号を取得する
  6. URLのパス部分を取得する
  7. URLのパラメータを取得する
  8. URLの#~を取得する
  9. URLのプロトコルとポートを取得する
  10. まとめ

現在のURLを取得する

現在のページのURLを取得するには、$(location).attr(‘href’)を使用します。

URL

https://enowl.net/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>現在のURLを取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageUrl = $(location).attr('href');
10      console.log(pageUrl);
11    </script>
12  </body>
13</html>
取得内容

https://enowl.net/jquery/demo/index.html

URLのプロトコルを取得する

URLのプロトコルを取得するには、$(location).attr(‘protocol’)を使用します。

URL

https://enowl.net/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのプロトコルを取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageProtocol = $(location).attr('protocol');
10      console.log(pageProtocol);
11    </script>
12  </body>
13</html>
取得内容

https:

URLのホスト名を取得する

URLのホスト名を取得するには、$(location).attr(‘hostname’)を使用します。

URL

https://enowl.net/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのホスト名を取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageHostName = $(location).attr('hostname');
10      console.log(pageHostName);
11    </script>
12  </body>
13</html>
取得内容

enowl.net

URLのホスト名を取得する（ポート番号も含む）

URLのホスト名を取得するには、$(location).attr(‘host’)を使用します。
こちらはポート番号も取得します。

URL

https://enowl.net:8080/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのホスト名を取得する（ポート番号も含む）</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageHost = $(location).attr('host');
10      console.log(pageHost);
11    </script>
12  </body>
13</html>
取得内容

enowl.net:8080

URLのポート番号を取得する

ポート番号を取得するには、$(location).attr(‘port’)を使用します。

URL

https://enowl.net:8080/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのポート番号を取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pagePort = $(location).attr('port');
10      console.log(pagePort);
11    </script>
12  </body>
13</html>
取得内容

8080

URLのパス部分を取得する

URLのパス部分を取得するには、$(location).attr(‘pathname’)を使用します。

URL

https://enowl.net:8080/jquery/demo/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのパス部分を取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pagePathName = $(location).attr('pathname');
10      console.log(pagePathName);
11    </script>
12  </body>
13</html>
取得内容

/jquery/demo/index.html

URLのパラメータを取得する

URLのパラメータを取得するには、$(location).attr(‘search’)を使用します。

URL

https://enowl.net:8080/jquery/demo/index.html?page=2

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのパラメータを取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageSearch = $(location).attr('search');
10      console.log(pageSearch);
11    </script>
12  </body>
13</html>
取得内容

?page=2

URLの#~を取得する

URLの#~（アンカーリンク）を取得するには、$(location).attr(‘hash’)を使用します。

URL

https://enowl.net:8080/jquery/demo/index.html#about

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLの#~を取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageHash = $(location).attr('hash');
10      console.log(pageHash);
11    </script>
12  </body>
13</html>
取得内容

about

URLのプロトコルとポートを取得する

URLのプロトコルとポートを取得するには、$(location).attr(‘origin’)を使用します。

URL

https://enowl.net:8080/jquery/demo/index.html#about

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>URLのプロトコルとポートを取得する</title>
5  </head>
6  <body>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8    <script>
9      const pageOrigin = $(location).attr('origin');
10      console.log(pageOrigin);
11    </script>
12  </body>
13</html>
取得内容

https://enowl.net:8080

まとめ

jQueryでURLやパラメータを取得する方法でした。

パラメータを取得して処理を分けたりすることもあるので、これを見ながらJS書いていきたいと思います。

ここまで読んでいただきありがとうございました！

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！
個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する
私について
なお
なお
Webデザイナー
InstagramContact
ホームページをご覧いただきありがとうございます！ なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました