勉強したことのメモ

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

  関連記事

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

JavaScriptの変数宣言であるvar / let / constの使い分けについて

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...