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

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

[読了時間の目安:約 7 分]

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 の基本的というか典型的な処理です。

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

Comments:1

正規表現初級 13-05-21 (火) 14:28

basename(path)から
return path.replace(/\/g,’/').replace( /.*//, ” ); // 間違い
return path.replace(/\\/g,’/').replace( /.*\//, ” ); //が正しい

basename()の正しい方の意味は、
1.MS Windowsのパスで使われる区切り文字 ‘\’(日本では¥)をurlで使われる’/'(スラッシュ)に置き換え

2.一番右側に現れるスラッシュ文字以左の文字をすべて空文字に置き換える

dirname(path)から
return path.replace(/\/g,’/').replace(//[^/]*$/, ”);; //間違い
return path.replace(/\\/g,’/').replace(/\/[^/]*$/, ”); //が正しい

dirname()の正しい方の意味は、
1.basename()と同じ処理

2.一番右側に現れるスラッシュ文字一つとスラッシュ以外の文字0個以上の組み合わせからなる文字列を空文字と置き換える。

間違いの方は、¥文字とスラッシュがエスケープされていません。
¥は正規表現のエスケープ文字なので、¥を表すには¥¥としなければなりません。

また、replaceの第一引数の書式は、この場合 /正規表現/gとなっていて、正規表現中で引用符で使用しているスラッシュを使う場合¥/としなければなりません。(文字クラス[ ] の中はこの場合エスケープしなくてもよかったと思います。)

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://blog.btmup.com/javascript/link-javascript-jquery-filename-dirname-extraction.html/trackback
Listed below are links to weblogs that reference
リンクしているパスから JavaScript(jQuery)でファイル名を抽出する方法。 from btmup Blog

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

リンク
フィード
メタ情報

このページのトップへ