如何在包含必須使用雙引號的 JSON 字符串的數據設置值周圍添加單引號？

Question

我有以下創建元素的代碼，我什至可以添加更多屬性、類、id 等

    if(is_video){
        Mcontent = $(document.createElement("video"))
        Msource = $(document.createElement("source"))
        Msource.attr("src",url)
        Msource.attr("type","video/"+formato)
        Mcontent.attr("class","video-js vjs-default-skin")
        Mcontent.append(Msource)
    }

使用以下代碼，我將屬性添加到特定標簽：

 var json = {"aspectRatio":"640:267", "playbackRates": [1, 1.5, 2]}; const content = $('video').addClass('video-js vjs-default-skin') content.attr('data-setup', JSON.stringify(json));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <video></video>

當我使用瀏覽器的開發人員工具檢查代碼時，這給了我以下結果：

<video class="video-js vjs-default-skin" data-setup="{"aspectRatio":"640:267","playbackRates":[1,1.5,2]}">

</video>

我需要屬性data-setup='' this 用單引號而不是雙引號data-setup="" ，我怎樣才能得到這個結果：

<video class="video-js" data-setup='{"aspectRatio":"640:267","playbackRates":[1,1.5,2]}'>

</video>

請注意官方文檔 videoJS 的注釋。 其中警告：注意：您必須在 data-setup 的值周圍使用單引號，因為它包含必須使用雙引號的 JSON 字符串。

Answer 1

你不需要用單引號污染你的 HTML。 JavaScript 將為您正確編碼屬性值....

 const Mcontent = $('video').addClass('video-js vjs-default-skin') Mcontent.attr('data-setup', JSON.stringify({ aspectRatio: "640:267", playbackRates: [1, 1.5, 2] })) // this is what the generated HTML will look like $('pre').text($('section').html()) // decode example, just showing that it's possible console.info(JSON.parse($('video').attr('data-setup')))

 section { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <video></video> </section> <pre></pre>

HTML 編碼的值，即

<video data-setup="{&quot;aspectRatio&quot;:&quot;640:267&quot;,&quot;playbackRates&quot;:[1,1.5,2]}">

將作為 JSON 完全可讀（假設這是用於的）。

下面是生成的標記示例~ JSFiddle demo