JavaScriptでURL(パス)からファイル名を取得する

JavaScriptでURL(パス)からファイル名を取得する

このコードは、現在のページのURLパス(ドメイン以下の部分)から、ファイル名を取得するためのものです。
ファイル名とは、URLの最後のスラッシュ / の後にある文字列を指します。

実装例:JavaScriptでURL(パス)からファイル名を取得する

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

コード解説

  • window.location.pathname は、現在のページのパス名を取得します。
  • 例えば、URLが http://www.example.com/dir/file.html の場合、/dir/file.html が返されます。
  • url.lastIndexOf('/') は、文字列の中で最後に / が現れる位置を取得します。
  • この例では、/dir/file.html の中で最後の /dir/ の後にあります。
  • url.substring(url.lastIndexOf('/') + 1) は、その最後の / の次の文字から文字列の終わりまでを抽出します。
  • つまり、ファイル名の部分(file.html)を取得します。

まとめ

このコードは非常にシンプルかつ効果的に、現在のページのURLパスからファイル名を取り出せます。
ただし、URLの末尾が / で終わっている場合は空文字列が返るので、その場合の処理を追加するとより堅牢になります。

関連記事
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
このチュートリアルでは、ウェブページからFacebookアプリを自動または手動で起動し、指定したFacebookページを開く方法を紹介しています。ページIDの取得方法、iPhoneとAndroidで異なるリダイレクト方法、リンクによる手動遷移の実装例を説明し、最後にクライアント判別を含むサンプルパッケージも提供しています。Facebook誘導やモバイルUX改善を目指す方におすすめです。
Details
Details
3ヶ月前
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
hash_equals は PHP において、2つの文字列が等しいかを安全に比較するための関数です。特にパスワードのハッシュや署名の検証などで使われます。== や === といった通常の比較演算子とは異なり、タイミング攻撃(Timing A […]
解構人
解構人
25日前
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
同一ドメイン配下の複数アプリケーションにおけるCSRF対策ガイド
目次 1. 技術的背景と適用シナリオ 代表的な適用例 技術的利点 潜在的なリスク 2. CSRF保護メカニズムの基本原則 保護の三要素 3. 複数アプリケーション環境におけるセキュリティ課題 3.1 セッション命名衝突の深層的影響 具体的な […]
解構人
解構人
2ヶ月前
同一ドメイン配下の複数アプリケーションにおけるCSRF対策ガイド
JavaScript を使って通貨形式を数値に変換する
JavaScriptの正規表現を利用し、通貨表記に含まれる無効な記号を取り除くことで、簡単に通貨文字列を数値に変換できます。これにより、数値計算や金額比較などが容易になります。
Details
Details
3ヶ月前
JavaScript を使って通貨形式を数値に変換する
相対パスと絶対パスの使い方
相対パスは、モジュールやディレクトリ内のローカルな参照に適しており、柔軟性があります。一方、絶対パスはウェブサイト全体で共通のリソース(CSS、画像、CDNなど)を参照する際に便利です。両者を理解して使い分けることで、パスのエラーや読み込み不具合を防げます。
Details
Details
2ヶ月前
相対パスと絶対パスの使い方
PHPでMySQLのバージョンを確認する方法
PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。
Details
Details
2ヶ月前
PHPでMySQLのバージョンを確認する方法
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
2025年最新の画像遅延読み込み(Lazy Load)完全ガイド。ネイティブloading="lazy"とIntersectionObserverの使い分け・実装例・SEOやLCPへの最新対応ポイントまで徹底解説。パフォーマンスと検索順位アップのための必読ノウハウ!
aki0o0
aki0o0
3ヶ月前
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
「一括管理って響き最高!」だけど…WordPressでメルマガ配信するならセキュリティにご用心!メリットと落とし穴、そしてBenchmark Emailの使い方まで、編集長がゆるっと解説!
WASABI
WASABI
1ヶ月前
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!
SEOは知ってるけどGEOは初耳?AI時代に欠かせない「生成エンジン最適化(GEO)」の意味・必要性・対策ポイントを初心者向けにやさしく解説!
WASABI
WASABI
1ヶ月前
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!
ABテストとは?赤か青か?データが導く最適な選択
ABテストは、今やデジタルマーケティングの「常識」となった科学的な意思決定手法です。日本のECサイトやアプリ開発の現場でも、「どちらのデザインが効果的か」「どんなキャッチコピーが響くか」を決める際に頻繁に活用されています。 この手法のルーツ […]
解構人
解構人
1ヶ月前
ABテストとは?赤か青か?データが導く最適な選択
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
auto_copyright() 関数は、動的に著作権の年数を出力します。引数として開始年を受け取り、現在の年と比較して、単一年または範囲(例: 2015 - 2025)を表示します。
Details
Details
3ヶ月前
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
autoCopyright(startYear, elementId) 関数は、指定した開始年から現在年までの著作権表記(例: "2020 - 2025")を自動生成し、指定されたHTML要素に表示します。
Details
Details
3ヶ月前
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
2025年6月最新版のTIOBEインデックスから、今人気のプログラミング言語を解説。Python、C、C++、Javaなどの注目度や、インデックスの活用方法も紹介します。
解構人
解構人
2ヶ月前
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。
Details
Details
2ヶ月前
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
はじめに Webサイトの表示速度や操作感は、単にコンテンツの量や見た目だけでなく、ブラウザがリソースをどのように読み込むかによっても大きく左右されます。特にJavaScriptや画像の読み込み順序、そしてそれらがどのように相互作用しているか […]
解構人
解構人
2ヶ月前
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本