【超便利】JavaScriptでURL操作の基本テクニック！パス取得からパラメータ解析まで

2024-05-19

JavaScript で URL パスの部分を取得する方法

ウェブページを訪れた際に、ブラウザのアドレスバーにはそのページの URL が表示されています。この URL には、ドメイン名、パス、クエリ文字列などの情報が含まれています。

このチュートリアルでは、JavaScript を使用して URL パスの部分を取得する方法について説明します。具体的には、以下の方法について解説します。

location.pathname プロパティ を使用する方法
正規表現 を使用する方法
jQuery ライブラリを使用する方法

最も簡単な方法は、location.pathname プロパティを使用する方法です。このプロパティは、現在のページのパス部分を文字列として返します。

var path = location.pathname;
console.log(path); // 例: /index.html

より柔軟な方法として、正規表現を使用して URL パスの部分を取得することができます。

var url = "https://www.example.com/category/product/123";
var match = url.match(/\/([^\/]+)\/([^\/]+)\/([^\/]+)$/);

if (match) {
  var category = match[1];
  var product = match[2];
  var id = match[3];
  console.log("Category:", category); // 例: category
  console.log("Product:", product); // 例: product
  console.log("ID:", id); // 例: 123
} else {
  console.error("URL parsing failed");
}

この例では、URL からカテゴリ、製品、ID を抽出しています。

jQuery ライブラリを使用すると、URL パスの部分を取得するコードをより簡潔に記述することができます。

var path = $(location).attr('pathname');
var parts = path.split('/');

console.log("Category:", parts[2]); // 例: category
console.log("Product:", parts[3]); // 例: product
console.log("ID:", parts[4]); // 例: 123

この例では、jQuery の attr() メソッドを使用して pathname 属性を取得し、split() メソッドを使用してパスを配列に分割しています。

上記で紹介した方法は、それぞれ異なる利点と欠点があります。

正規表現: 柔軟性が高いが、記述が複雑になる
jQuery ライブラリ: 簡潔に記述できるが、jQuery ライブラリの読み込みが必要

状況に合わせて適切な方法を選択してください。

// 例えば、現在のページの URL が https://www.example.com/category/product/123 の場合

var path = location.pathname;
console.log(path); // 出力: /category/product/123

// 例えば、URL が "https://www.example.com/category/product/123" の場合

var url = "https://www.example.com/category/product/123";
var match = url.match(/\/([^\/]+)\/([^\/]+)\/([^\/]+)$/);

if (match) {
  var category = match[1];
  var product = match[2];
  var id = match[3];
  console.log("Category:", category); // 出力: Category
  console.log("Product:", product); // 出力: Product
  console.log("ID:", id); // 出力: 123
} else {
  console.error("URL parsing failed");
}

// 例えば、現在のページの URL が https://www.example.com/category/product/123 の場合

var path = $(location).attr('pathname');
var parts = path.split('/');

console.log("Category:", parts[2]); // 出力: Category
console.log("Product:", parts[3]); // 出力: Product
console.log("ID:", parts[4]); // 出力: 123

説明

上記のコードは、いずれもブラウザのコンソールに出力されます。
それぞれのコードは、異なる方法で URL パスの部分を取得します。
コード中のコメントは、各コードの動作を説明しています。

補足

上記のコードはあくまで一例であり、状況に合わせて自由に改変することができます。
正規表現を使用する場合は、正規表現の構文に関する知識が必要です。
jQuery ライブラリを使用する場合は、jQuery ライブラリを事前に読み込む必要があります。

JavaScript で URL パスの部分を取得するその他の方法

URLSearchParams インターフェースは、URL のクエリ文字列を操作するための API です。このインターフェースを使用して、URL パスの部分を取得することもできます。

const url = new URL('https://www.example.com/category/product/123');
const path = url.pathname;
const parts = path.split('/');

console.log("Category:", parts[2]); // 出力: Category
console.log("Product:", parts[3]); // 出力: Product
console.log("ID:", parts[4]); // 出力: 123

History API は、ブラウザの履歴を操作するための API です。この API を使用して、現在のページの URL パスの部分を取得することもできます。

const path = new URL(window.location.pathname).pathname;
const parts = path.split('/');

console.log("Category:", parts[2]); // 出力: Category
console.log("Product:", parts[3]); // 出力: Product
console.log("ID:", parts[4]); // 出力: 123

ブラウザの組み込み関数を使用する方法

一部のブラウザには、URL パスの部分を取得するための組み込み関数が用意されています。例えば、Internet Explorer では window.location.pathname プロパティを使用することができます。

// Internet Explorer の場合

var path = window.location.pathname;
var parts = path.split('/');

console.log("Category:", parts[2]); // 出力: Category
console.log("Product:", parts[3]); // 出力: Product
console.log("ID:", parts[4]); // 出力: 123