javascript - how to force jquery attr() to add the attribute with single quotes - Stack Overflow

admin管理员组

文章数量:1417691

I create an in memory div:

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

In essence I have some variables:

var key = "data-video-srcs";
var value = '{"video1":";list=TLhaPoOja-0f4","video2":";list=TLalXwg9bTOmo"}';

And I use jquery to add that data attribute to the div:

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

Here is my problem. After doing that I get this:

<div class="vidinfo-inline" data-video-srcs="{"video1":";list=TLhaPoOja-0f4","video2":";list=TLalXwg9bTOmo"}"></div>

And that doesn't work putting that json in there. It has to be in single quotes. It has to look like this:

<div class="vidinfo-inline" data-video-srcs='{"video1":";list=TLhaPoOja-0f4","video2":";list=TLalXwg9bTOmo"}'></div>

As later on I do something like this:

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

And that won't work unless the json is in single quotes.

Does anyone have any ideas?

EDIT:

According to jquery:

When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string.

Thus I can't escape the double quotes, it has to be inside single quotes. I have a work around and I'll post that as an answer unless someone else has a better answer.

I create an in memory div:

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

In essence I have some variables:

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

And I use jquery to add that data attribute to the div:

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

Here is my problem. After doing that I get this:

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

And that doesn't work putting that json in there. It has to be in single quotes. It has to look like this:

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

As later on I do something like this:

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

And that won't work unless the json is in single quotes.

Does anyone have any ideas?

EDIT:

According to jquery: http://api.jquery./data/#data-html5

When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string.

Thus I can't escape the double quotes, it has to be inside single quotes. I have a work around and I'll post that as an answer unless someone else has a better answer.

• javascript
• jquery
• html
• json

Share Improve this question Follow edited Sep 2, 2013 at 22:27 bfcoder asked Sep 2, 2013 at 19:16 bfcoderbfcoder 3,14222 gold badges2929 silver badges3535 bronze badges 2

• 2 Why do you put data to data-video-srcs? If you already have it in javascript - why not to store it there? – u_mulder Commented Sep 2, 2013 at 19:19
• I am building an authoring interface. It essentially will output the html that someone needs to put in their own page that the javascript will then interact with. – bfcoder Commented Sep 2, 2013 at 20:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I have a workaround. And if anyone has a better solution, I'd love to see it.

I wrote a replace method:

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

So basically I send the html into this function and insert it into the DOM.

For example:

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

I realize that has some code smell to it. I mean, going through everything on that element just to fix the double quotes to single quotes stinks. But for lack of other options or ideas, it works. :\

Replace the double quotes with HTML entities:

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

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

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

// Then store it as normal

本文标签： javascripthow to force jquery attr() to add the attribute with single quotesStack Overflow