勉強したことのメモ

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

  関連記事

DateTimePickerで特定日にClassを付与&選択不可にする方法
DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

javascriptでゼロパティング
javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...