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サイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
IT業界の初心者が知っておくべきの用語(2025版)
新しいテクノロジーについて話すとき、時々自分がみんなのペースについていけないと感じることはありませんか?あるいは、その業界にいるのに、自分はまだ十分ではないと感じ、多くの専門用語を理解しなければならないこともあるでしょう。
Details
Details
5ヶ月前
IT業界の初心者が知っておくべきの用語(2025版)
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
autoCopyright(startYear, elementId) 関数は、指定した開始年から現在年までの著作権表記(例: "2020 - 2025")を自動生成し、指定されたHTML要素に表示します。
Details
Details
6ヶ月前
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
【CSS & JavaScript & SVG対応】円グラフ(扇形図)のアニメーション表現まとめ
はじめに 円グラフ(パイチャート)は、比率や構成比を視覚的に伝えるのに最適なUIコンポーネントです。最近、業務で使う機会があり、さまざまな方法でエフェクトをつけて表示する実装を試しました。 この記事では、以下の3パターンで実装する方法を紹介 […]
キウイフルーツ
キウイフルーツ
5ヶ月前
【CSS & JavaScript & SVG対応】円グラフ(扇形図)のアニメーション表現まとめ
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
2025年最新!PHPでのWeb開発に役立つライブラリ&フレームワーク12選を厳選紹介。Laravel・Symfony・PHPMailer・Guzzleなど、実務で使えるツールをまとめてチェック。公式リンク付きで、今すぐ使える便利リスト!
aki0o0
aki0o0
6ヶ月前
よく使われるPHPライブラリ9選【公式リンク付き・2025年版】
ページ遷移の一般的な方法
本記事では、Webページにおけるページ遷移(リダイレクト)の一般的な実装方法について紹介しています。JavaScript、HTMLのメタタグ、PHP、ASPを用いたリダイレクト方法をそれぞれ具体的なコード例と共に解説しています。
Details
Details
6ヶ月前
ページ遷移の一般的な方法
PHPでランダムIDを生成するランダムな文字列を生成する
このPHPコードは、セキュリティ重視のWebシステムに必要な「予測不可能な」ランダムトークンを生成するために設計されています。openssl_random_pseudo_bytes() を使うことで、一般的な rand() や mt_rand() よりも格段に安全なランダム性が確保されます。
Details
Details
6ヶ月前
PHPでランダムIDを生成するランダムな文字列を生成する
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
このチュートリアルでは、ウェブページからFacebookアプリを自動または手動で起動し、指定したFacebookページを開く方法を紹介しています。ページIDの取得方法、iPhoneとAndroidで異なるリダイレクト方法、リンクによる手動遷移の実装例を説明し、最後にクライアント判別を含むサンプルパッケージも提供しています。Facebook誘導やモバイルUX改善を目指す方におすすめです。
Details
Details
6ヶ月前
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
PHPでMySQLのバージョンを確認する方法
PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。
Details
Details
5ヶ月前
PHPでMySQLのバージョンを確認する方法
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
hash_equals は PHP において、2つの文字列が等しいかを安全に比較するための関数です。特にパスワードのハッシュや署名の検証などで使われます。== や === といった通常の比較演算子とは異なり、タイミング攻撃(Timing A […]
解構人
解構人
3ヶ月前
PHPの hash_equals 関数とは?なぜ == や === を使わないのか?
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
auto_copyright() 関数は、動的に著作権の年数を出力します。引数として開始年を受け取り、現在の年と比較して、単一年または範囲(例: 2015 - 2025)を表示します。
Details
Details
6ヶ月前
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!
SEOは知ってるけどGEOは初耳?AI時代に欠かせない「生成エンジン最適化(GEO)」の意味・必要性・対策ポイントを初心者向けにやさしく解説!
WASABI
WASABI
4ヶ月前
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
:not()疑似クラスはCSSでの除外指定に便利ですが、親要素や階層関係に対しては思わぬ制約があります。本記事では、WordPressの投稿構造を例に、インラインコードとコードブロックを正確に区別するためのセレクタ設計を解説します。
無敵の小さな蚊
無敵の小さな蚊
5ヶ月前
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。
Details
Details
5ヶ月前
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
CSSによる絶対中央寄せ
実用性が高い方法順で7種類の実装方法を紹介 最も推奨されるのは Flexbox と Grid transform を使う方法はどんな要素にも応用可能 line-height や table-cell は特定用途向け JavaScript による制御も紹介されている
Details
Details
6ヶ月前
CSSによる絶対中央寄せ