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=''的属性data-setup=""，如何获得此结果：

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

</video>

注意official documentation 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（假定使用的是JSON）。

下面是生成的标记的一个示例〜JSFiddle demo

如何在包含必须使用双引号的JSON字符串的数据设置值周围添加单引号？

1 个答案: