[解決済み] JSONをHTML属性に格納する最良の方法とは？

質問

JSONオブジェクトをHTML要素の属性に入れる必要があります。

1. HTMLはバリデーションする必要がない。

   回答者：Quentin にJSONを格納します。 data-* 属性 で、これは有効な HTML5 です。

2. JSONオブジェクトはどんなサイズにもなりえます - つまり、巨大です。

   回答者：森 舞久 HTMLの属性は、65536文字まで可能です。 .

3. JSONに特殊文字が含まれている場合はどうすればよいですか？ 例えば {foo: '<"bar/>'}

   回答者：Quentin 通常の慣習に従って、属性に入れる前にJSON文字列をエンコードしてください。 PHPの場合は htmlentities() 機能 .

EDIT - PHPとjQueryを使用したソリューションの例

HTML属性にJSONを書き込む。

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

jQueryを使ってJSONを取得する。

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

どのように解決するのですか？

HTMLはvalidateする必要がありません。

なぜそうしないのでしょうか？バリデーションは本当に簡単なQAで、多くの間違いを発見することができます。HTML 5の data-* 属性を使用します。

JSONオブジェクトはどんなサイズでもよい（つまり巨大でもよい）。

私は、属性サイズに対するブラウザの制限に関するドキュメントを見たことがありません。

もし制限に遭遇した場合は、データを <script> . オブジェクトとマップ要素を定義する id をそのオブジェクトのプロパティ名と対応させます。

JSONに特殊文字が含まれている場合はどうすればよいですか？(例: {test: '<"myString/>'})

信頼できないデータを属性値に含めるための通常のルールに従えばよいのです。使用方法 & と " (属性値を二重引用符で囲んでいる場合)または ' (シングルクォーテーションで属性値を囲む場合)。

ただし、これはJSONではないことに注意してください（プロパティ名は文字列で、文字列は二重引用符のみで区切られる必要があります）。