2

我创建了一个内存 div：

var video_div = document.createElement('div');
video_div.className = "vidinfo-inline";

本质上我有一些变量：

var key = "data-video-srcs";
var value = '{"video1":"http://www.youtube.com/watch?v=KdxEAt91D7k&list=TLhaPoOja-0f4","video2":"http://www.youtube.com/watch?v=dVlaZfLlWQc&list=TLalXwg9bTOmo"}';

我使用 jquery 将该数据属性添加到 div：

$(video_div).attr(key, value);

这是我的问题。这样做之后，我得到了这个：

<div class="vidinfo-inline" data-video-srcs="{"video1":"http://www.youtube.com/watch?v=KdxEAt91D7k&list=TLhaPoOja-0f4","video2":"http://www.youtube.com/watch?v=dVlaZfLlWQc&list=TLalXwg9bTOmo"}"></div>

把那个json放在那里是行不通的。它必须在单引号中。它必须看起来像这样：

<div class="vidinfo-inline" data-video-srcs='{"video1":"http://www.youtube.com/watch?v=KdxEAt91D7k&list=TLhaPoOja-0f4","video2":"http://www.youtube.com/watch?v=dVlaZfLlWQc&list=TLalXwg9bTOmo"}'></div>

稍后我会做这样的事情：

var video_srcs = $('.vidinfo-inline').data('video-srcs');

除非 json 在单引号中，否则这将不起作用。

有没有人有任何想法？

编辑：

根据jquery：http ://api.jquery.com/data/#data-html5

当数据属性是对象（以'{'开头）或数组（以'['开头）时，则使用jQuery.parseJSON来解析字符串；它必须遵循有效的 JSON 语法，包括引用的属性名称。如果该值不可解析为 JavaScript 值，则将其保留为字符串。

因此我无法逃避双引号，它必须在单引号内。我有一个解决方法，除非其他人有更好的答案，否则我会将其发布为答案。

4

2 回答 2

3

我有一个解决方法。如果有人有更好的解决方案，我很乐意看到它。

我写了一个替换方法：

var fixJson = function(str) {
  return String(str)
    .replace(/"{/g, "'{")
    .replace(/}"/g, "}'");
};

所以基本上我将 html 发送到这个函数中并将其插入到 DOM 中。

例如：

var html = htmlUnescape($('#temp_container').html());
html = fixJson(html);

我意识到这有一些代码味道。我的意思是，遍历该元素上的所有内容只是为了将双引号修复为单引号很臭。但由于缺乏其他选择或想法，它有效。:\

于 2013-09-02T22:36:48.450 回答
2

用 HTML 实体替换双引号：

var value = '{"video1":"http://www.youtube.com/watch?v=KdxEAt91D7k&list=TLhaPoOja-0f4","video2":"http://www.youtube.com/watch?v=dVlaZfLlWQc&list=TLalXwg9bTOmo"}';

# Naive approach:
value = value.replace('&', '&amp;').replace('"', '&quot;');

# Using jQuery:
var $tmp = jQuery('<div></div>');
value = $tmp.text(value).html();

// Then store it as normal
于 2013-09-02T19:19:21.740 回答