2014.01.20
jQuery 追加の置換をしたいのよ〜正規表現？(`･ω･´)キラッ
先ず何から取っ掛かっていいのかも分からないほど…jQuery学習にブランクが開いてしまいました。
少々いじる機会があったのでリハビリ備忘録を付けておきます。
階層が違うyo!相対パスが切れるno！
メインサイトさわやかまみれを更新するとき、面倒のなきようナビゲーションが置いてある各ページ共通のfooterに外部ファイルのhtmlを.loadで読み込んでます。
（以前書いた記事『備忘録 jQuery .loadでfooterを管理 & ウィンドウサイズで位置変更』）
階層が違うページに共通仕様のfooter.htmlを読み込ませるとナビゲーションや画像のリンク（相対バス）が切れてしまうため、別階層用のfooter.htmlを用意しておりました。
変更があれば当然、二つのfooter.htmlを直さなくてはなりません。
めんどくさい。
めんどくさいという理由からcssを覚えjQueryに手をだしたのに…むっきー
そこで今度は一つのfooter.htmlで済むようにロード時にリンクを書き換えるスクリプトをなんとかしようと思います。
loadで読み込むfooter.htmlのパスの分岐
まず、footer.htmlへのパスを分岐させる条件を付けるべく下の階層にあるunder.htmlの<body>にidを振り、
|
1 |
<body id="under_layer">〜</body> |
bodyにid=under_layerがある時は上の階層へのパス、それ意外の時は同じ階層という具合に分岐をしておきました。
|
1 2 3 4 5 6 7 8 |
if($('body').is('#under_layer')){ $('#footer_wrap').load('../footer.html #footer', function () {// 下の階層なのでパスを変える小細工をしたい。 }); } else { $('#footer_wrap').load('footer.html #footer', function () {// デフォルトなのでとくになにもしない。 }); |
そしてunder.htmlに読み込んだfooter部分のリンクのパスを変えるべく上記.loadのfunction()の部分、コールバック関数で小細工をしたいと思います。
各ページへのLINKと画像のパスを書き換える
一階層上のファイルにアクセスしたいだけなので、相対バスの頭に../を付けてやればいいだけなのです。
簡単です。簡単に違いありません。しかし方法が分かりません…
aとimgの属性をそれぞれ.attrで書き換えてやればいいんです。
しかし、単純にhrefをattrで拾って、
|
1 2 3 4 |
$('#footer a').each(function() { var UnUrl = $(this).attr('href'); $(this).attr('href', "../"+UnUrl); }); |
するとツイッターやブログのアドレスのhttpから始まる部分の頭にも../がついてしましま。
そこでググったところ.replaceで正規表現とかなにそれ魔法？という方法が見つかりました。
|
1 2 3 4 5 |
$('#footer a').each(function() { var UnUrl = $(this).attr('href'); var ReUrl = UnUrl.replace(/([a-z]+\.html$|[a-z_]+\.rss$)/g, "../$1"); $(this).attr('href', ReUrl); }); |
３行目。attrで取得したurlを.replace(“置換したい文字列”,”置換後の文字列”)で置き換えるのですが、置き換えるんじゃないの、頭に追加したいのという希望をかなえるのが、最後の$1の部分。
正規表現で文字列を（）でグループ化しておくとキャッシュしておいてくれて、後方参照ちうので使い回せるんです。
ところでちょっと正規表現の覚え書き。
/スラッシュ/で囲った部分が正規表現。クォートでは囲まないよ。
スラッシュ内の（）は文字列をグループ化。
[a-z]+ 小文字a~zまでのいずれか一文字を一回以上繰り返し。(baa)
\.html$ バックスラッシュでドットをエスケープして文字としてあつかい、最後が.htmlと一致(.html)
| の区切りは’または、’でrssも検索(foo.rss)
最後のgで複数個文字列を検索。(この場合いらんかも？）
.replace(/置換したい文字列の正規表現/,”追加する文字列$1″)の$1にグループ化しておいた文字列baa.htmlが参照され
../baa.htmlとなります。
やった(∩・ω・)∩なりました。
画像も同じようにsrcを置換してやることにします。画像はまたフォルダに入ってるので、正規表現をちょろっと変えなくては…
.+jpg$とかでいいかなぁ。
ちょっと正規表現は難しいですが、覚えると色んな事ができそうですな。
くそぅ404の亡霊
リンク切れもなく、画像も無事に表示されておりますが、SafariのWEBインスペクタのコンソールに画像がノットファウンドだとエラーがでちゃいます。
Firefoxコンソール、FirBugではエラーありません。
404だという画像のパスはunder.htmlと同じ階層になってまふので、読み込みのタイミングだとは思いますがちょっと悲すぃですね。
スポンサーリンク
コメントをどうぞ