JavaScriptで指定したURLの最終パス名(ディレクトリ)を取得する方法
2025/03/21
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
関連記事
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)
vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
leaflet.jsとOSMでマップ表示及びマーカー設置方法
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...