JavaScriptでデータをダンプする「jQuery Dumpプラグイン」

JavaScriptでデータをダンプする「jQuery Dumpプラグイン」

Posted at March 8,2011 1:55 AM
Tag:[Dump, jQuery, Plugin]

PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。

jQuery Dump
jQuery Dumpプラグイン

1.サンプル

jQuery Dumpを使ってデータをダンプするには次のように設定します(青色部分)。

<pre id="dump"></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
    $(function(){
        var obj = {
            hubba: "Some string...",
            bubba: 12.5,
            dubba: ["One", "Two", "Three"]
        }
        $("#dump").append($.dump(obj));
    });
</script>

実行結果

Object {
     hubba: "Some string..."
     bubba: 12.5
     dubba: Array (
          0 => "One"
          1 => "Two"
          2 => "Three"
     )
}

次のように、要素を指定したデータダンプも可能です(青色部分)。

<p>Hubba <span>bubba</span> dubba</p>
<pre id="dump"></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
    $(function(){
        $("#dump").append($("p").dump());
    });
</script>

実行結果

jQuery Object {
     0 = DOMElement [
          nodeName: P
          nodeValue: null
          innerHTML: [
               0 = String: Hubba
               1 = DOMElement [
                    nodeName: SPAN
                    nodeValue: null
                    innerHTML: [
                         0 = String: bubba
                    ]
               ]
               2 = String: dubba
          ]
     ]
}

2.返却値の型

このプラグインで返却可能な型は次の通りです。

  • Strings
  • Numbers
  • Booleans
  • Dates
  • Arrays
  • Objects
  • jQuery Objects
  • RegExp
  • Errors
  • DOMElements
  • Functions

3.ダウンロード

ページの下にある「View all releases」をクリック。

jQuery Dumpプラグイン

「jquery.dump.js.txt」を右クリックして「jquery.dump.js」というファイル名で保存します。

jQuery Dumpプラグイン

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)