Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

JavaScript・jQuery

リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。

投稿日:

PHP には「basename()」や「dirname()」という便利な関数があり、それぞれファイル名とディレクトリ名を、指定したパスから抽出することができます。
しかし、JavaScript にそんな便利機能はありません。
自ら処理を用意してやる必要があります。

今回はその処理と、jQuery を使って簡単に適用する方法をご紹介します。

JavaScript でファイル名とディレクト名を抽出

まずは「指定したパスからファイル名を抽出」する方法。
これは僕が考え出したのではなくて(それが出来たら初めから悩まない)、色々調べた挙句に辿り着いた海外の記事で紹介されていたものです。
»Javascript basename() and dirname() « planetOzh

そのスクリプトがこちら。

function basename(path) {
	return path.replace(/\/g,'/').replace( /.*//, '' );
}

function dirname(path) {
	return path.replace(/\/g,'/').replace(//[^/]*$/, '');;
}

「basename()」がファイル名、「dirname()」がディレクトリ名を抽出する処理(関数)ですね。
がっつり正規表現使ってます。
こんなもの僕には到底ムリですよ。えぇ。

引数 path にファイルのパスを指定して、それを replace メソッドでゴニョゴニョしてます。

最初の replace は「」を「/」に変換してるみたいですね。
普通は「/」しか使われないはずなので特に必要ないような気がするんですが、「」が混ざることがあるんでしょうか……。
よく分からないのでそのままにしてます。

2 つめの replace が、それぞれファイル名とディレクトリ名を抽出する処理です。
詳しいことは書きません(=分かりません)が、恐らくファイル名の方は「最後の「/」から後の文字列」で、ディレクトリ名の方は「最後の「/」までの文字列」みたいな感じじゃないでしょうか。アルゴリズム的に。
読み解いた訳じゃないので、どこまで正しいかは分かりません。
というかむしろ誰か教えてください。

ちなみに、「dirname」の処理の最後が「;;」になってますが、「;」で良いと思います。

jQuery でファイル名抽出スクリプトを適用

で、jQuery でも上記のスクリプトがそのまま使えます。

例えば、ページの中で PDF にリンクしているすべての要素において、ファイル名を抽出・表示する場合は以下のようになります。

$(document).ready(function(){
	$('a[href$="pdf"]').each(function(){
		//ファイル名取得
		var fileName = $(this).attr('href').replace(/\/g,'/').replace(/.*//, '');
		$(this).append('<span class="fileName">('+fileName+')</span>');
	});
});

これを実行すると、「<a href="hoge/fuga/abcde.pdf">PDFファイル</a>」となっているところは「PDFファイル(abcde.pdf)」と表示されるはずです。

まず「$('a[href$="pdf"]')」で、リンク先が PDF の要素を選択しています。
その条件に当てはまるすべてに対して処理を行うので、each メソッドを使用。
そして、選択されている a 要素の href 属性(つまりリンクのパス)を「$(this).attr('href')」で取得してやれば、あとは replace メソッドがゴニョゴニョしてくれます。
その結果を変数「fileName」に渡し、append メソッドで表示(要素を追加)しています。

まぁ要するに、入口と出口(パスの指定と処理後の表示)を jQuery で担当しているってことですね。
抽出した「fileName」を使えば、もっと色々な処理(比較とか条件分岐とかファイル名書き替えとか)も出来るんでしょうが、とりあえずこういう使い方が多いような気がします。

jQuery でディレクトリ名抽出スクリプトを適用

ディレクトリ名を抽出する方法も、中身の処理以外はファイル名のときと同じです。

$(document).ready(function(){
	$('a[href$="pdf"],a[href$="doc"]').each(function(){
		//ディレクトリ名取得
		var dirName = $(this).attr('href').replace(/\/g,'/').replace(//[^/]*$/, '');
		$(this).append('<span class="dirName">('+dirName+')</span>');
	});
});

ファイル名と同じ例(「<a href="hoge/fuga/abcde.pdf">PDFファイル</a>」)で言えば、「PDFファイル(hoge/fuga)」と表示されます。
最後が「/」じゃないと気持ち悪いのであれば append メソッドの処理のところに追加してください。

以下(ほぼ)同文。

フルパスの抽出

ファイル名とかディレクトリ名とかじゃなくて全部表示したいんだよ!
という諸兄のために、一応リンクのフルパスの抽出・表示方法も書いときます。

$(document).ready(function(){
	$('a[href$="pdf"]').each(function(){
		var fullpath = $(this).attr('href');
		$(this).append('<span class="fullpath">('+fullpath+')</span>');
	});
});

単純に replace メソッドの処理が無くなっただけですね。
というか、jQuery の基本的というか典型的な処理です。

使いどころがあるかどうか微妙ですが、念のためのメモということで。




-JavaScript・jQuery
-, , , , ,

Copyright© btmup Blog , 2019 All Rights Reserved Powered by AFFINGER5.