json文字列をdata属性で扱うときのエスケープについて


javascriptの配列をJSON.stringify()して、それをjQueryで動的に生成したhtmlコードのdata属性に組み込むときにエスケープする必要があります。

[code]

        function escapeHtml(text) {
        return text
              .replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
        }
    
    var json_array = ["a", "b"];
    $('div').html('<p data-json="'+escapeHtml(JSON.stringify(json_array))+'"></p>');
    
[/code]

これではjson文字列の「"」までエスケープしてしまい、data属性を取得して配列に戻すときのJSON.parse()でエラーになってしまいますので改善策を教えて頂けますか？




どのようにdata属性を取得しようとしていますか？挿入方法の善悪はさておき、提示されたコードで問題なく動いていると思いますが……

[code]

    function escapeHtml(text) {
        return text
              .replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
        }
    
    const json_array = ["a", "b"];
    const $wrap = $('.wrap');
    $wrap.html('<p data-json="'+escapeHtml(JSON.stringify(json_array))+'"></p>');
    const $data = $wrap.find('[data-json]');
    
    console.log($data.data()); // {json: ["a", "b"]}
    
    console.log($data.attr("data-json")); // '["a", "b"]'
    console.log(JSON.parse($data.attr("data-json"))); // ["a", "b"]
    
    console.log(($data[0].dataset.json)); // '["a", "b"]'
    console.log(JSON.parse(($data[0].dataset.json))); // ["a", "b"]
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class='wrap'></div>
[/code]




どのようにdata属性を取得しようとしていますか？挿入方法の善悪はさておき、提示されたコードで問題なく動いていると思いますが……

[code]

    function escapeHtml(text) {
        return text
              .replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
        }
    
    const json_array = ["a", "b"];
    const $wrap = $('.wrap');
    $wrap.html('<p data-json="'+escapeHtml(JSON.stringify(json_array))+'"></p>');
    const $data = $wrap.find('[data-json]');
    
    console.log($data.data()); // {json: ["a", "b"]}
    
    console.log($data.attr("data-json")); // '["a", "b"]'
    console.log(JSON.parse($data.attr("data-json"))); // ["a", "b"]
    
    console.log(($data[0].dataset.json)); // '["a", "b"]'
    console.log(JSON.parse(($data[0].dataset.json))); // ["a", "b"]
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class='wrap'></div>
[/code]

