勉強したことのメモ

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

  関連記事

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...