时间戳

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

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

问题描述

我有以下创建元素的代码，我什至可以添加更多属性、类、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 字符串。

标签： javascriptjqueryhtml

解决方案

您不需要用单引号污染您的 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

推荐阅读