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の末尾が / で終わっている場合は空文字列が返るので、その場合の処理を追加するとより堅牢になります。

関連記事
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
2025年6月最新版のTIOBEインデックスから、今人気のプログラミング言語を解説。Python、C、C++、Javaなどの注目度や、インデックスの活用方法も紹介します。
解構人
解構人
8ヶ月前
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
同一ドメイン配下の複数アプリケーションにおけるCSRF対策ガイド
目次 1. 技術的背景と適用シナリオ 代表的な適用例 技術的利点 潜在的なリスク 2. CSRF保護メカニズムの基本原則 保護の三要素 3. 複数アプリケーション環境におけるセキュリティ課題 3.1 セッション命名衝突の深層的影響 具体的な […]
解構人
解構人
8ヶ月前
同一ドメイン配下の複数アプリケーションにおけるCSRF対策ガイド
【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法
このjQueryコードは、トグルボタンの状態に応じてナビゲーションを開閉し、背景のスクロールを動的に制御します。クラス名 back をトリガーとして、html 要素に適切なスタイルを適用し、快適なフルスクリーンUIを提供します。
Details
Details
9ヶ月前
【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
:not()疑似クラスはCSSでの除外指定に便利ですが、親要素や階層関係に対しては思わぬ制約があります。本記事では、WordPressの投稿構造を例に、インラインコードとコードブロックを正確に区別するためのセレクタ設計を解説します。
無敵の小さな蚊
無敵の小さな蚊
8ヶ月前
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
autoCopyright(startYear, elementId) 関数は、指定した開始年から現在年までの著作権表記(例: "2020 - 2025")を自動生成し、指定されたHTML要素に表示します。
Details
Details
9ヶ月前
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
hash_equals は PHP において、2つの文字列が等しいかを安全に比較するための関数です。特にパスワードのハッシュや署名の検証などで使われます。== や === といった通常の比較演算子とは異なり、タイミング攻撃(Timing A […]
解構人
解構人
7ヶ月前
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。
Details
Details
9ヶ月前
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
PHPのcheckdnsrr関数徹底解説:メールアドレス検証での活用方法
目次 フォーム開発で遭遇した課題 checkdnsrr関数とは? 主な用途 メールアドレスのドメイン検証 ドメイン存在確認 SPFレコードチェック ネットワーク診断ツール メリット デメリットと制限事項 実際の活用例 基本的なメールドメイン […]
解構人
解構人
7ヶ月前
PHPのcheckdnsrr関数徹底解説:メールアドレス検証での活用方法
JavaScript を使って通貨形式を数値に変換する
JavaScriptの正規表現を利用し、通貨表記に含まれる無効な記号を取り除くことで、簡単に通貨文字列を数値に変換できます。これにより、数値計算や金額比較などが容易になります。
Details
Details
9ヶ月前
JavaScript を使って通貨形式を数値に変換する
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
はじめに Webサイトの表示速度や操作感は、単にコンテンツの量や見た目だけでなく、ブラウザがリソースをどのように読み込むかによっても大きく左右されます。特にJavaScriptや画像の読み込み順序、そしてそれらがどのように相互作用しているか […]
解構人
解構人
8ヶ月前
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
!important なしでも大丈夫!CSS @layer でスタイル管理をもっと簡単に
CSS の !important は便利ですが、乱用すると保守が難しくなります。そこで注目されているのが新機能 @layer。この記事では、@layer を使って優先度を整理する方法を実装例とともに紹介します。
Details
Details
7ヶ月前
!important なしでも大丈夫!CSS @layer でスタイル管理をもっと簡単に
PHPでMySQLのバージョンを確認する方法
PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。
Details
Details
8ヶ月前
PHPでMySQLのバージョンを確認する方法
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
2025年最新!PHPでのWeb開発に役立つライブラリ&フレームワーク12選を厳選紹介。Laravel・Symfony・PHPMailer・Guzzleなど、実務で使えるツールをまとめてチェック。公式リンク付きで、今すぐ使える便利リスト!
aki0o0
aki0o0
9ヶ月前
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
ユーザーのブラウザに保存されているJavaScript、CSS、画像のキャッシュを削除するにはどうすればいいですか?
ブラウザのキャッシュによる古いJavaScript、CSS、画像の表示を防ぐには、URLにバージョン番号や日時パラメータを付けてリソースを更新する方法が有効です。 毎回タイムスタンプを使うとキャッシュ効果がなくなるため、手動や適切なタイミングでバージョン番号を管理するのがおすすめです。
Details
Details
9ヶ月前
ユーザーのブラウザに保存されているJavaScript、CSS、画像のキャッシュを削除するにはどうすればいいですか?
CSSによる絶対中央寄せ
実用性が高い方法順で7種類の実装方法を紹介 最も推奨されるのは Flexbox と Grid transform を使う方法はどんな要素にも応用可能 line-height や table-cell は特定用途向け JavaScript による制御も紹介されている
Details
Details
9ヶ月前
CSSによる絶対中央寄せ