JavaScriptとjQueryでURLの最後のセグメントを取得する方法
JavaScriptとjQueryでURLの最後のセグメントを取得する方法
ウェブページのURLは、そのページの内容や機能を特定するために使用されます。URLには、ドメイン名、パス、クエリ文字列など、さまざまな要素が含まれています。このうち、パスの最後の部分は、しばしば「最後のセグメント」と呼ばれ、ページの特定の要素や機能を表すために使用されます。
このチュートリアルでは、JavaScriptとjQueryを使用して、現在のURLの最後のセグメントを取得する方法を説明します。
方法 1: JavaScriptのネイティブAPIを使用する
JavaScriptには、URLを操作するためのネイティブAPIが用意されています。このAPIを使用して、現在のURLの最後のセグメントを取得するには、以下のコードを使用します。
const url = window.location.href;
const lastSegment = url.split('/').pop();
console.log(lastSegment);
このコードは、まず現在のURLを取得します。次に、/ でURLを分割し、配列を作成します。最後に、pop() メソッドを使用して、配列の最後の要素を取得します。この要素が、URLの最後のセグメントになります。
方法 2: jQueryを使用する
jQueryを使用している場合は、以下のコードを使用して、現在のURLの最後のセグメントを取得することができます。
const lastSegment = window.location.pathname.split('/').pop();
console.log(lastSegment);
例
以下の例は、上記のコードをどのように使用できるかを示しています。
<!DOCTYPE html>
<html>
<head>
<title>Last Segment of URL</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const lastSegment = window.location.pathname.split('/').pop();
console.log(lastSegment);
$('#last-segment').text(lastSegment);
});
</script>
</head>
<body>
<p>URLの最後のセグメント: <span id="last-segment"></span></p>
</body>
</html>
この例では、lastSegment 変数にURLの最後のセグメントが格納されます。次に、この変数の値が #last-segment 要素のテキストコンテンツに設定されます。
補足
- URLの最後のセグメントは、必ずしもページの特定の要素や機能を表すとは限りません。場合によっては、単にランダムな文字列であることもできます。
- URLの最後のセグメントを取得するには、他の方法もあります。上記で紹介した方法は、最も一般的で簡単な方法です。
const url = window.location.href;
const lastSegment = url.split('/').pop();
console.log(lastSegment);
const lastSegment = window.location.pathname.split('/').pop();
console.log(lastSegment);
<!DOCTYPE html>
<html>
<head>
<title>Last Segment of URL</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const lastSegment = window.location.pathname.split('/').pop();
console.log(lastSegment);
$('#last-segment').text(lastSegment);
});
</script>
</head>
<body>
<p>URLの最後のセグメント: <span id="last-segment"></span></p>
</body>
</html>
説明
このコードは、以下の手順でURLの最後のセグメントを取得します。
window.location.hrefプロパティを使用して、現在のURLを取得します。/でURLを分割し、配列を作成します。pop()メソッドを使用して、配列の最後の要素を取得します。
この例では、以下のことが行われます。
lastSegment変数にURLの最後のセグメントが格納されます。- この変数の値が
#last-segment要素のテキストコンテンツに設定されます。
- 上記のコードは、単純な例です。実際のアプリケーションでは、URLの最後のセグメントを使用して、さまざまな処理を行うことができます。
JavaScriptとjQuery以外でURLの最後のセグメントを取得する方法
RegExp (Regular Expression) を使用する
正規表現を使用して、URLの最後のセグメントを抽出することができます。以下のコードは、その例です。
const url = window.location.href;
const lastSegment = url.match(/\/([^\/]+)$/)[1];
console.log(lastSegment);
/([^\/]+)$/という正規表現を作成します。この正規表現は、スラッシュ (/) に続く、スラッシュ (/) で囲まれていない任意の文字列 ([^\/]+) をマッチさせます。match()メソッドを使用して、正規表現をURLにマッチさせます。- マッチした結果の最初の要素 (
[1]) を取得します。これが、URLの最後のセグメントになります。
URLSearchParams オブジェクトを使用して、URLのクエリ文字列のパラメータにアクセスすることができます。このオブジェクトには、URLの最後のセグメントも含まれています。以下のコードは、その例です。
const urlParams = new URLSearchParams(window.location.search);
const lastSegment = urlParams.get('path');
console.log(lastSegment);
new URLSearchParams(window.location.search)を使用して、URLSearchParams オブジェクトを作成します。get('path')メソッドを使用して、pathという名前のパラメータの値を取得します。このパラメータには、URLの最後のセグメントが含まれています。
History API を使用して、ブラウザの履歴にアクセスすることができます。このAPIには、現在のURLの情報を取得するメソッドも含まれています。以下のコードは、その例です。
const lastSegment = window.history.state.path;
console.log(lastSegment);
const lastSegment = window.location.pathname.split('/').pop();
console.log(lastSegment);
pop()メソッドを使用して、配列の最後の要素を取得します。これが、URLの最後のセグメントになります。
上記で紹介した方法は、いずれもURLの最後のセグメントを取得する方法です。どの方法を使用するかは、状況によって異なります。
- RegExp は、より複雑なURLパターンを処理する場合に適しています。
- URLSearchParams は、URLのクエリ文字列のパラメータにアクセスする場合に適しています。
- History API は、ブラウザの履歴にアクセスする場合に適しています。
- Location オブジェクト は、URLに関する基本的な情報にアクセスする場合に適しています。
javascript jquery
