JSONをhtml属性として渡す

Question

JSONをHTML属性として渡す必要がある問題が発生しています。

{ "ファイル名"： "myFile.js"、 "内容"： "VAR kは= '私の値'"}

私はHTMLに渡しています私は、JSON文字列を持っています属性：'マークとしてvar k = 'My Value'がエスケープされていないと、属性file-jsonの値が{"filename":"myFile.js","content":"var k =ではなく、完全な文字列だと思うし、HTMLパーサの原因です

<ide file-json='{"filename":"myFile.js","content":"var k = 'My Value'"}'></ide> 

問題が発生します。 file-json属性は、追加処理のためにjavascriptで読み込まれます。

filenameとcontentの両方のjsonキーの値は、ユーザーが生成したもので、ほとんどの値を持つことができます。 file-json属性全体をエスケープする方法はありますか？

私はすでに試してみました事、そしてその失敗の理由は以下の通りです：（実際のJSON入力が非常に大きくなる可能）

• のあらゆる問題のインスタンスを逃れるために巨大な正規表現を使用しますjsonファイル。これは主に2つの主な理由からです。最初は遅いですが、もっと重要なのは「ダム」な解決策であり、多くの場合間違いやエラーが発生してデータが破損することがあります。

• json構造全体をbase64/hexに変換します。このエンコードされた構造体をfile-jsonに渡します。それを読み込んだらjavascriptでbase64からjson文字列に変換し直してください。最後に処理を続行します。これまでのところ、データ破損を引き起こすことができない唯一のソリューションなので、私が思いついたベストソリューションです。しかし、どちらも遅く、メンテナンス性と拡張性の問題につながる多数の可動部品で構成されています。

Answer 1

あなたのJSONは有効なJSONのように見える、文字列でないとその本当に場合はそう単純ではJSON.stringifyは、

var json = {"filename":"myFile.js","content":"var k = 'My Value'"} 
var stringified = JSON.stringify(json); 
// or whatever element identifier you have 
document.getElementById('foo').setAttribute('file-json', stringified) 

仕事をする必要があり、単純にJSON.parse()

var stringified = JSON.stringify(JSON.parse(json)); 

FIDDLEを追加