35345


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()でエラーになってしまいますので改善策を教えて頂けますか？


CC BY-SA 3.0
2017-06-06T11:57:14.373
35343
2017-06-06T13:00:35.377
19445
question
javascript json
json文字列をdata属性で扱うときのエスケープについて


どのように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]


CC BY-SA 3.0
2017-06-06T12:13:00.483
35345
2017-06-06T12:13:00.483
2376
35343
answer


既にクローズされていますが、エスケープせずとも書けます。

  * [jQuery() | jQuery API Documentation](http://api.jquery.com/jquery/#jQuery-html-attributes)

[code]

    'use strict';
    var p = jQuery('<p>', {'data-json': JSON.stringify(['a', 'b'])});
    jQuery('div').append(p);
    
    var array = JSON.parse(jQuery('div>p[data-json]').attr('data-json'));
    console.log(array); // ["a", "b"]
[/code]

[code]

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


CC BY-SA 3.0
2017-06-06T13:00:35.377
35348
2017-06-06T13:00:35.377
20262
35343
answer