数年前に作成したウェブサイトがサーバ移転することになり移転作業の依頼が舞い込んできた、担当になった平井が移転対応に必要なフロントエンドの作業を洗い出すために聴取をはじめたのだが、相対ルートパスが使えない上に簡単に相対ルートパスを取得することのできるPHPが使えないなど多くの制約が絡む案件だったのだった。

運命の糸が絡みあった時、縛りプレイが発生する。

・ウェブサイトのサーバ移転の際に設置ディレクトリ（階層）が変わってしまう。
・依頼を受けた段階で設置ディレクトリが決まってない上にいつ決まるかわからないのでどの階層に設置しても問題ないような状態で納品したい。
・PHP使えない。SSI使えない。.htaccess使えない。

相対パスで解決出来無い相対ルートパスで書かれていたインクルードパーツ（ヘッダーやフッター）の画像やaタグのリンクは書き換えが必要になるので動的取得したPathで書き換えよう。

そんな時のためのスクリプトがこちら

locationを使って正規表現でゴニョゴニョすればOKです。locationはフロントエンドで頻繁に使うよ。

var local = window.location;
var dirCount = strCount(local.pathname, '\/');

function strCount(all, part) {
	return (all.match(new RegExp(part, 'g'))||[]).length;
}
function getDir(place, n) {
	return place.pathname.replace(new RegExp('(?:\\\/+[^\\\/]*){0,' + ((n || 0) + 1) + '}$'), '/');
}

使い方

このスクリプトを実行したページの現在位置を基準にディレクトリ（Path）を取得します。
例えば実行したページのディレクトリがこんな感じなら　https://okinawa.razona.jp/hoge/hogehoge/

getDir(local); // 現在のディレクトリを取得
//結果 /hoge/hogehoge/

getDir(local,1); // 1つ上のディレクトリ取得する。第２引数で深さを指定できる。
//結果 /hoge/

//ルートを取得するには
getDir(local,dirCount);

書き換えたい要素のPathはあらかじめ置換用に’/roodDir/’のようなダミーテキストを入れておく。

<img src="/rootDir/img/hoge.jpg" alt="hoge">

classを振って取得したPathを付加する方法でもいい。
但し画像のパスを書き換える場合はローディング処理をしないと、Pathが書き換わるまでリンク切れ状態のimg要素が表示されることになるので注意したい。

var rootDir = getDir(local,dirCount);
(function(){
	$.each('img', function(index, val) {
		$(this).attr('src', $(this).attr('src').replace('/rootDir/', rootDir));
	});
});

aタグのリンクを書き換えたい時は同じようにattrメソッドで’href’を書き換えてやればいい。

もしインクルードしているパーツがajaxで読み込まれていたならdoneやコンプリートのタイミングでPathを書き換える必要があるので注意したい。

$.ajax({
	url: '/path/to/file',
	type: 'default GET (Other values: POST)',
	dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
	data: {param1: 'value1'},
})
.done(function() {
	console.log("success");
	//ajaxの読み込みが終わってからpathの書き換えを実行しよう！
});