javascript 埋め込み json のエスケープ

アプリケーションから html 内の javascript 定数へ json を吐き出した時のダブルクォーテーションやシングルクォーテーションのエスケープでハマったのでメモ

captionへ「Hello "World" '23」という文字列を投入しようとした場合

まずは、アプリケーションのjsonライブラリから得られる文字列

    {"caption":"Hello \"World\" '23"}

上記をjavascriptへシングルクォーテーションでそのまま落とすと

    const json = '{"caption":"Hello \"World\" '23"}';

シングルクォーテーション('23の所)をエスケープして

    const json = '{"caption":"Hello \"World\" \'23"}';

    const jsonArray = JSON.parse(json);

問題なさそげだけどブラウザに \"World \" の所でエラーが報告される

これ、変数 json に代入された時点で \" がエスケープされて

{"caption":"Hello "World" '23"}

これを JSON.parse へ渡しても \" がエスケープされてないという事になる

正しくは {"caption":"Hello \"World\" '23"}でなければならないので

エスケープのエスケープが必要となる

    const json = '{"caption":"Hello \\"World\\" \'23"}';

    const jsonArray = JSON.parse(json);