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

関連記事
IT業界の初心者が知っておくべきの用語(2025版)
新しいテクノロジーについて話すとき、時々自分がみんなのペースについていけないと感じることはありませんか?あるいは、その業界にいるのに、自分はまだ十分ではないと感じ、多くの専門用語を理解しなければならないこともあるでしょう。
Details
Details
7ヶ月前
IT業界の初心者が知っておくべきの用語(2025版)
!important なしでも大丈夫!CSS @layer でスタイル管理をもっと簡単に
CSS の !important は便利ですが、乱用すると保守が難しくなります。そこで注目されているのが新機能 @layer。この記事では、@layer を使って優先度を整理する方法を実装例とともに紹介します。
Details
Details
5ヶ月前
!important なしでも大丈夫!CSS @layer でスタイル管理をもっと簡単に
【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法
このjQueryコードは、トグルボタンの状態に応じてナビゲーションを開閉し、背景のスクロールを動的に制御します。クラス名 back をトリガーとして、html 要素に適切なスタイルを適用し、快適なフルスクリーンUIを提供します。
Details
Details
7ヶ月前
【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法
JavaScript を使って通貨形式を数値に変換する
JavaScriptの正規表現を利用し、通貨表記に含まれる無効な記号を取り除くことで、簡単に通貨文字列を数値に変換できます。これにより、数値計算や金額比較などが容易になります。
Details
Details
7ヶ月前
JavaScript を使って通貨形式を数値に変換する
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
「一括管理って響き最高!」だけど…WordPressでメルマガ配信するならセキュリティにご用心!メリットと落とし穴、そしてBenchmark Emailの使い方まで、編集長がゆるっと解説!
WASABI
WASABI
6ヶ月前
WordPressサイトでメルマガ運用する時の注意点|簡単にできることには注意が必要でやんす。
ページ遷移の一般的な方法
本記事では、Webページにおけるページ遷移(リダイレクト)の一般的な実装方法について紹介しています。JavaScript、HTMLのメタタグ、PHP、ASPを用いたリダイレクト方法をそれぞれ具体的なコード例と共に解説しています。
Details
Details
7ヶ月前
ページ遷移の一般的な方法
ユーザーのブラウザに保存されているJavaScript、CSS、画像のキャッシュを削除するにはどうすればいいですか?
ブラウザのキャッシュによる古いJavaScript、CSS、画像の表示を防ぐには、URLにバージョン番号や日時パラメータを付けてリソースを更新する方法が有効です。 毎回タイムスタンプを使うとキャッシュ効果がなくなるため、手動や適切なタイミングでバージョン番号を管理するのがおすすめです。
Details
Details
8ヶ月前
ユーザーのブラウザに保存されているJavaScript、CSS、画像のキャッシュを削除するにはどうすればいいですか?
PHPでMySQLのバージョンを確認する方法
PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。
Details
Details
7ヶ月前
PHPでMySQLのバージョンを確認する方法
相対パスと絶対パスの使い方
相対パスは、モジュールやディレクトリ内のローカルな参照に適しており、柔軟性があります。一方、絶対パスはウェブサイト全体で共通のリソース(CSS、画像、CDNなど)を参照する際に便利です。両者を理解して使い分けることで、パスのエラーや読み込み不具合を防げます。
Details
Details
7ヶ月前
相対パスと絶対パスの使い方
CSSによる絶対中央寄せ
実用性が高い方法順で7種類の実装方法を紹介 最も推奨されるのは Flexbox と Grid transform を使う方法はどんな要素にも応用可能 line-height や table-cell は特定用途向け JavaScript による制御も紹介されている
Details
Details
7ヶ月前
CSSによる絶対中央寄せ
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
:not()疑似クラスはCSSでの除外指定に便利ですが、親要素や階層関係に対しては思わぬ制約があります。本記事では、WordPressの投稿構造を例に、インラインコードとコードブロックを正確に区別するためのセレクタ設計を解説します。
無敵の小さな蚊
無敵の小さな蚊
6ヶ月前
【CSSテクニック】:not()セレクタで階層を跨いだ除外を実現
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
このチュートリアルでは、ウェブページからFacebookアプリを自動または手動で起動し、指定したFacebookページを開く方法を紹介しています。ページIDの取得方法、iPhoneとAndroidで異なるリダイレクト方法、リンクによる手動遷移の実装例を説明し、最後にクライアント判別を含むサンプルパッケージも提供しています。Facebook誘導やモバイルUX改善を目指す方におすすめです。
Details
Details
7ヶ月前
Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
2025年6月最新版のTIOBEインデックスから、今人気のプログラミング言語を解説。Python、C、C++、Javaなどの注目度や、インデックスの活用方法も紹介します。
解構人
解構人
7ヶ月前
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
autoCopyright(startYear, elementId) 関数は、指定した開始年から現在年までの著作権表記(例: "2020 - 2025")を自動生成し、指定されたHTML要素に表示します。
Details
Details
7ヶ月前
JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!
SEOは知ってるけどGEOは初耳?AI時代に欠かせない「生成エンジン最適化(GEO)」の意味・必要性・対策ポイントを初心者向けにやさしく解説!
WASABI
WASABI
6ヶ月前
SEOは聞いたことありますよね?ではGEOってご存知ですか?|生成エンジン最適化(GEO)の重要性や必要なことをまとめました!