サンプルコードをそのまま実行する

前回のエントリでサンプルコードをエントリ内に
書いていて、ページ内に記述しているサンプルを
そのまま実行させたいなぁ、などと思って以下の
ようにしてみました。

var execCode = function(id) {
    //再帰的にタグを除去してコード自身を取り出す関数

    function extract(node) {

        var result = '';

        var childs = node.childNodes;

        var len = childs.length;

        for(var i = 0; i < len; i ++) {

            //elementノードだったら再起呼び出しをする

            result += ((childs[i].nodeType == 1) ? arguments.callee(childs[i]) : childs[i].nodeValue);

        }

        return result;

    }
    //抽出したコードを評価して実行

    eval(extract(document.getElementById(id)));

}

記載されたサンプルコードからタグを除去してeval
するというシンプルなもの。「arguments.callee」
で再起呼び出しにしているのでタグをネストしても
大丈夫なはず。説明をわかりやすくするためにタグ
を付加したりすることも多いですが、別途実行用の
コードを用意しなくても良いので少しは便利かも。


サンプルのコードは以下のようにid付きのPREタグ
の中に書いておき、idを上記の関数に渡せば実行が
できます。

<pre id="sample">

 var objA = {

   name: 'John',

   dispName: function() {

    alert(this.name);

   }

 };
 var objB = {

   name: 'Betty'

 };
 objB.dispName = objA.dispName;
 objA.dispName(); //結果は「John」

 objB.dispName(); //結果は「Betty」  

</pre>

<a onclick="execCode('sample')" href="javascript:void(0)">コードを実行</a>

と、ここまで書いておきながら大事なことを忘れてました。
「はてなダイアリー」だからJavaScriptが使えない。。。。


GoogleGadjetsを使えば下記のように実行させることができますが、
改行文字は%0Dを自分で入れないといけないので、少し大変かもです。