システム部の鈴木です。
年度末で弊社も大忙しですが、小ネタを一つ。
phpとかですと共通のヘッダやフッタなどを共通化するというのは良くありますが、
それをJavaScriptでやってみたいと思います。
仕様
- 共通ファイルのhtmlを作成、部品毎に＜!–inc_****–＞＜!–/inc_****–＞で囲んでおく
- ajaxで共通ファイルをロード
- 読み取る側のhtmlでは、＜!–inc_****–＞＜!–/inc_****–＞ の **** 部分を指定して表示
共通ファイルのhtml
例えば幾つかのリストがあって、複数のページで使いまわしたいとします。
それを共通のファイルにぶちこんでおきます。
[html]
<!–inc_lsit1–>
<ul>
<li>てすと1</li>
<li>てすと1</li>
</ul>
<!–/inc_lsit1–>
<!–inc_lsit2–>
<ul>
<li>てすと2</li>
<li>てすと2</li>
</ul>
<!–/inc_lsit2–>
[/html]
javascript
include.js とかで保存しときます
共通ファイルのURLは今回は決め打ちですが、共通ファイルが多様でない想定のものなので決め打ちで。
[javascript]
$(function(){
var tmp = $.ajax({
url: ‘/path/to/include.html’,
cache: false,
async: false
}).responseText;
var target = $(‘[id^=inc_]’);
jQuery.each(target, function() {
var include = $(this).attr(‘id’);
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
$(this).html(html[0].replace(reg, ”));
});
});
[/javascript]
読み取る側のhtml
include.js をロードし、読み取りたい部分をidで指定します
以下の例では共通ファイルから＜!–inc_list1–＞＜!–/inc_list1–＞の範囲だけを抜き出して表示させます
[html]
<script src="include.js"></script>
<div id="list1"></div>
[/html]
以上です。
今回のように特定のタグ～特定のタグのような範囲を抜く場合は最短マッチを使います。
さらに今回は複数行にマッチさせています。
加えてマッチさせる条件に変数を使いたいので RegExp オブジェクトでパターンを作成してます。
該当部分はここですね。
[javascript]
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
[/javascript]
また読み込む側のページで何箇所か抜き出したい、今回の例ならlist1もlist2も表示させたい場合もあると思うので
そのために $(‘[id^=inc_]’) でページ内の表示させたい部分をまとめて拾って、jQuery.each() で順に処理させてます。
いわゆる共通化が目的ならphpが使えればもちろんその方が簡単なのですが、
staticページで作っててmod_rewriteも使えないなど制約があるときにはこんな方法もあります、という小ネタでした。
またはちょっとしたスクレイピングをささっとやりたい場合に使えるかもしれないですね。
