勉強したことのメモ

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のカラーピッカープラグイン「excolor」の利用方法

以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...

Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法

Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時 ...

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

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

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

jQueryのdatetimepickerでスクロール入力を無効化させる方法

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...