CODEWITHSUNDEEP
javascripthtmlregexjsonescaping
patad
patad

Reputation: 9692

Best practices for passing HTML as JSON

According to what I've read (the below links for instance) you need to escape \ and " when sending HTML as JSON, but that's all you need to escape.

I have two ways of getting my data:

1) From Front-end

I am fetiching the html from the page like so:

$('#myDiv').html()

Which gives me a string containing html, newlines and white spaces.

<a class="some-class" href="somepage.html">
    <figure class="someClass">
        <img src="/img/pic.png" alt="">
    </figure>
</a>

I can now choose to either use JSON.stringify (which apparently is unnecessary as I only have to escape \ and ") to get:

"<a class=\"some-class\" href=\"somepage.html\">\n        <figure class=\"someClass\"> \n             <img src=\"/img/pic.png\" alt=\"\">\n        </figure>\n    </a>"

and then JSON.parse later to turn it back into HTML and insert into the DOM.

Or I can use escapeHTML() instead of JSON.Stringify:

escapeHTML: function(htmlString) {
         var chr = {
             '"': '&quot;',
             '&': '&amp;',
             "'": '&#39;',
             '/': '&#47;',
             '<': '&lt;',
             '>': '&gt;'
     };

    return html.htmlString(/[\"&'\/<>]/g, function (a) { return chr[a]; });
}

which gives me:

&lt;a class=&quot;some-class&quot; href=&quot;somepage.html&quot;&gt;
        &lt;figure class=&quot;someClass&quot;&gt; 
             &lt;img src=&quot;&#47;img&#47;pic.png&quot; alt=&quot;&quot;&gt;
        &lt;&#47;figure&gt;
    &lt;&#47;a&gt;

I can then unescape it by using the following Solution A:

return $('<textarea/>').html( response ).val();

2) From backend:

The above works great, but if the response I'm getting (from the backend service) looks like the following (escaped " and /), it doesn't work.

<a class=\"some-class\" href=\"somepage.html\">\n<figure class=\"someClass\">\n<img src=\"/img/pic.png\" alt=\"\">\n<\/figure>\n<\/a>

I first use Solution A. Then to to get rid of \" I use: 

markup.replace('\\"', '"');

Clearly that doesn't remove \/. My question is therefor: how can I combine a regexp to unescape both \ and " if I am to use the escapeHTML() way?

Would it be better to use escapeHTML() or JSON.Stringify when passing HTML as JSON?

Upvotes: 0

Views: 3473

Answers (1)

patad
patad

Reputation: 9692

After a lot of researching and thinking, we've decided it's better to use Javascripts own built in functions, rather than doing something manually.

Therefore we are using JSON.stringify combined with JSON.parse, and told backend to simply html encode their markup, instead of escaping " and / manually.

Upvotes: 1

Related Questions