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

関連記事
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
「一括管理って響き最高!」だけど…WordPressでメルマガ配信するならセキュリティにご用心!メリットと落とし穴、そしてBenchmark Emailの使い方まで、編集長がゆるっと解説!
WASABI
WASABI
4ヶ月前
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
jQuery Sortableがスマホなどのタッチスクリーンで使えない場合の対処法
モバイル端末でのクリックイベントとの競合を避けるため、タップ操作には click より touchstart を使うことを推奨。 jQuery UI のバージョンによっては、内部構造が異なる場合があるため、導入時はテストを行うこと。
Details
Details
6ヶ月前
jQuery Sortableがスマホなどのタッチスクリーンで使えない場合の対処法
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。
Details
Details
6ヶ月前
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
IT業界の初心者が知っておくべきの用語(2025版)
新しいテクノロジーについて話すとき、時々自分がみんなのペースについていけないと感じることはありませんか?あるいは、その業界にいるのに、自分はまだ十分ではないと感じ、多くの専門用語を理解しなければならないこともあるでしょう。
Details
Details
5ヶ月前
IT業界の初心者が知っておくべきの用語(2025版)
PHPのcheckdnsrr関数徹底解説:メールアドレス検証での活用方法
目次 フォーム開発で遭遇した課題 checkdnsrr関数とは? 主な用途 メールアドレスのドメイン検証 ドメイン存在確認 SPFレコードチェック ネットワーク診断ツール メリット デメリットと制限事項 実際の活用例 基本的なメールドメイン […]
解構人
解構人
4ヶ月前
PHPのcheckdnsrr関数徹底解説:メールアドレス検証での活用方法
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
はじめに Webサイトの表示速度や操作感は、単にコンテンツの量や見た目だけでなく、ブラウザがリソースをどのように読み込むかによっても大きく左右されます。特にJavaScriptや画像の読み込み順序、そしてそれらがどのように相互作用しているか […]
解構人
解構人
5ヶ月前
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
auto_copyright() 関数は、動的に著作権の年数を出力します。引数として開始年を受け取り、現在の年と比較して、単一年または範囲(例: 2015 - 2025)を表示します。
Details
Details
6ヶ月前
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
JavaScript を使って通貨形式を数値に変換する
JavaScriptの正規表現を利用し、通貨表記に含まれる無効な記号を取り除くことで、簡単に通貨文字列を数値に変換できます。これにより、数値計算や金額比較などが容易になります。
Details
Details
6ヶ月前
JavaScript を使って通貨形式を数値に変換する
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
2025年最新!PHPでのWeb開発に役立つライブラリ&フレームワーク12選を厳選紹介。Laravel・Symfony・PHPMailer・Guzzleなど、実務で使えるツールをまとめてチェック。公式リンク付きで、今すぐ使える便利リスト!
aki0o0
aki0o0
6ヶ月前
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
PHPでMySQLのバージョンを確認する方法
PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。
Details
Details
5ヶ月前
PHPでMySQLのバージョンを確認する方法
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
2025年6月最新版のTIOBEインデックスから、今人気のプログラミング言語を解説。Python、C、C++、Javaなどの注目度や、インデックスの活用方法も紹介します。
解構人
解構人
5ヶ月前
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
:not()疑似クラスはCSSでの除外指定に便利ですが、親要素や階層関係に対しては思わぬ制約があります。本記事では、WordPressの投稿構造を例に、インラインコードとコードブロックを正確に区別するためのセレクタ設計を解説します。
無敵の小さな蚊
無敵の小さな蚊
5ヶ月前
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
2025年最新の画像遅延読み込み(Lazy Load)完全ガイド。ネイティブloading="lazy"とIntersectionObserverの使い分け・実装例・SEOやLCPへの最新対応ポイントまで徹底解説。パフォーマンスと検索順位アップのための必読ノウハウ!
aki0o0
aki0o0
6ヶ月前
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
hash_equals は PHP において、2つの文字列が等しいかを安全に比較するための関数です。特にパスワードのハッシュや署名の検証などで使われます。== や === といった通常の比較演算子とは異なり、タイミング攻撃(Timing A […]
解構人
解構人
4ヶ月前
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
autoCopyright(startYear, elementId) 関数は、指定した開始年から現在年までの著作権表記(例: "2020 - 2025")を自動生成し、指定されたHTML要素に表示します。
Details
Details
6ヶ月前
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する