How to escape JSON in an HTML string stored as a Javascript variable?

Question

I'm trying to parse a JSON string and I can't get it to work because of illegal chracters - which I cannot find...

Here is what I have:

make = function (el) {
    var config = el.getAttribute("data-config");
    console.log(config);
    var dyn = $.parseJSON(config)
    console.log(dyn);
}

var a= document.createElement("<a href='#' class='template' data-config=\"{'role':'button','iconpos':'left','icon':'star','corners':'false','shadow':'false', 'iconshadow':'false', 'theme':'a','class':'test', 'href':'index.html','text':'Star Icon', 'mini':'true', 'inline':'true'}\">Star Icon</a>");
console.log(a);
make(a);

I'm not really sure how to correctly unescape the JSON in my original string "a", so that it works.

Question_:
Which quotation marks do I need to escape to get this to work?

Thanks!

EDIT:

Ok. I figured it out using Jquery (I'd prefer Javascript-only though). This works:

make = function (el) {
    var config = el.attr("data-config");
        console.log(config);
    var dyn = $.parseJSON(config)
        console.log(dyn);
}

var c = $('<a href="#" class="template" data-config=\'{"role":"button","iconpos":"left","icon":"star","corners":"false","shadow":"false", "iconshadow":"false", "theme":"a","class":"test", "href":"index.html","text":"Star Icon", "mini":"true", "inline":"true"}\'>Star Icon</a>')
console.log(c);
make(c);

So escaping the start/end quotations of the JSON string seems to do the trick. The actual problem was that I can not use document.createElement with a full string. I can only create the element document.createElement(a) and then set innerHTML. Need to look into this some more.

If someone can tell me a Javascript-only way how to do this, please let me know.

Thanks!

You can use this site to validate your json: jsonlint.com That will tell you if you have any illegal characters or incorrect markup — Ben McCormick
– Ben McCormick, Commented Mar 20, 2013 at 19:56
I know Jsonlint. Problem is, it complains about the two wrapping quotation marks. Without them the JSON is correct, but the HTML syntax is wrong. — frequent
– frequent, Commented Mar 20, 2013 at 19:58
How about you create the element without JSON, and then just set the attribute afterwards? The DOM API should take care of the escaping. (Or rather, when using the DOM API, no escaping should be necessary.) — millimoose
– millimoose, Commented Mar 20, 2013 at 19:58

Community · Accepted Answer · 2017-05-23 12:09:20Z

7

Strings and object keys in JSON must be double quoted. Double quotes in attributes are not valid, so you'll need to escape them with ".

Also, you probably want to use booleans true/false instead of strings "true"/"false".

var a = document.createElement('<a href="#" class="template" data-config="{&quot;role&quot;:&quot;button&quot;,&quot;iconpos&quot;:&quot;left&quot;,&quot;icon&quot;:&quot;star&quot;,&quot;corners&quot;:false,&quot;shadow&quot;:false,&quot;iconshadow&quot;:false,&quot;theme&quot;:&quot;a&quot;,&quot;class&quot;:&quot;test&quot;, &quot;href&quot;:&quot;index.html&quot;,&quot;text&quot;:&quot;Star Icon&quot;, &quot;mini&quot;:true,&quot;inline&quot;:true}\">Star Icon</a>');

Notice this is completely unreadable and @millimoose's suggestion about just setting the attribute afterwards will make this much easier to deal with in the long run.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 20, 2013 at 19:58

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frequent Over a year ago

Ok. Didn't know that. Trying.

Collectives™ on Stack Overflow

How to escape JSON in an HTML string stored as a Javascript variable?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related