Question

Receiving this error (“JSON.parse: unexpected character”) when I try to parse a JSON validated string. It works perfectly when I remove the characters that need escaped (style=”width:400px;”). What am I missing? Is there a unique way to escape characters before you use parseJSON?

var $cookieString = '{"youTabItems": { "youTab-001": <p style=\"width:400px;\">Welcome to my test</p>, "youTab-002": "test02Value", "youTab-003": "test03Value" }}';

var $myCookieString = $.parseJSON($cookieString);

logThis($myCookieString);

Update

I was able to get the majority of it working, until I started saving / retrieving from cookies. Right now, its cutting the content off after the semicolon…any thoughts on this? I’m using 3 functions I found on quirsmode.com for the cookie functionality (shown below).

        function setCookie(name, value, days) { var date, expires; if (days) { date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTString(); } else { expires = ""; } document.cookie = name + "=" + value + expires + "; path=/"; }
        function getCookie(name) { var nameEQ = name + "=", ca = document.cookie.split(';'), c, i; for (i = 0; i < ca.length; i++) { c = ca[i]; while (c.charAt(0) === ' ') { c = c.substring(1, c.length); } if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length, c.length); } } return null; }
        function eraseCookie(name) { setCookie(name, "", -1); }

        var cookieObject = {"youTabItems": { "youTab-001": "<p style=\"width:400px;\">Welcome to my test</p>", "youTab-002": "test02Value", "youTab-003": "test03Value" }};
        var cookieString = JSON.stringify($cookieVal);
        setCookie('youTabItems', cookieString, 28);

Answer 1

var $cookieString = '{"youTabItems": { "youTab-001": "<p style=\\"width:400px;\\">Welcome to my test</p>", "youTab-002": "test02Value", "youTab-003": "test03Value" }}';

var $myCookieString = $.parseJSON($cookieString);

Wrap your html as a string to make the JSON valid.

Why double slashes?

The blackslash is the escape character in JavaScript strings. That means we have to escape it itself to create a literal blackslash. And we need a literal backslash as escape character in the JSON.

Example:

var json = '{"foo": "\\""}';

will create the string

{"foo": "\""}

which is valid JSON. If we only had one backslash, it would create

{"foo": """}

which is not valid.

Notice: This is only needed because your JSON is inside a JavaScript string. If you serve it e.g. as a HTTP response, then you only need one backslash. But whatever you use to create the JSON will escape the quotes automatically, so you should not have to deal with that.

Update

A better method to store the data in a cookie would be:

var cookieObject = {"youTabItems": { "youTab-001": "<p style=\"width:400px;\">Welcome to my test</p>", "youTab-002": "test02Value", "youTab-003": "test03Value" }};
var cookieString = JSON.stringify(cookieObject);