勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで指定したURLの最終パス名(ディレクトリ)を取得する方法

   2025/03/21  JavaScript

JavaScriptで「https://taitan916.info/blog/archives/6876/」のようなURLから最終パス名(ディレクトリ)である「6876」を取得したい。ただ、pathnameプロパティを用いると「/blog/archives/6876/」が取得されてしまう。以下に対応方法をメモ。

 

対応方法

ソースコード

const url = new URL(`https://taitan916.info/blog/archives/6876/`);
const pathname = url.pathname;
const last_pathname = url.pathname.replace(/\/+$/, '').split('/').pop();
console.log(pathname); // 「/blog/archives/6876/」が出力
console.log(last_pathname); // 「6876」が出力

解説等

「/blog/archives/6876/」から正規表現で末尾のスラッシュを削除→split()にてスラッシュを区切りに配列化→pop()で配列の最後の要素を返すという内容になる。

 

リファレンス

split()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

pop()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

 - JavaScript

  関連記事

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法
PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法
jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法

jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...