title: JSON: Bad String
body: <p>I'm trying to create a <a href="https://jsonblob.com/" rel="nofollow noreferrer"><code>JSONBlob</code></a> with this JSON:</p>
  <pre><code>{
      &quot;res&quot;: &quot;&lt;!DOCTYPE html&gt;&lt;html lang='en'&gt; &lt;head&gt; &lt;meta charset='UTF-8'/&gt; &lt;meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/&gt; &lt;meta name='viewport' content='width=device-width'/&gt; &lt;meta name='ad.size' content='width=300,height=250'/&gt; &lt;title&gt;Banner&lt;/title&gt; &lt;style&gt;*{box-sizing: border-box;}body{margin: 0; padding: 0;}.hide{display: none;}#banner{width: 300px; height: 250px; position: relative; overflow: hidden; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear;}[class^='scene']{display: none; width: 300px; height: 250px; position: absolute; top: 0; left: 0; overflow: hidden;}[class^='scene'] &gt; div, [class^='scene'] &gt; img{position: absolute;}.scene0{background-color: #9719d7;}.scene0 .logo{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px 0px; width: 223px; height: 179px; right: 0; top: 35px;}.scene0 .fee{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -61px; width: 127px; height: 49px; top: 100px; left: 30px;}.scene0 .gone{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -180px; width: 101px; height: 43px; top: 104px; left: 170px;}.scene0 .dolar{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -61px; width: 23px; height: 49px; top: 100px; left: 30px;}.scene0 .l_5{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -388px -61px; width: 23px; height: 43px; top: 104px; left: 55px;}.scene0 .l_f{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -180px; width: 20px; height: 42px; top: 104px; left: 90px;}.scene0 .l_e1{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 112px;}.scene0 .l_e2{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 135px;}.scene0 .hand{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px -184px; width: 128px; height: 254px; top: 165px; left: -70px;}.scene1 .cover{background-color: #da1710; width: 300px; height: 250px;}.scene1 .purple_stripe{width: 12px; height: 250px; background-color: #9719d7;}.scene1 .logo_w{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -364px -142px; width: 41px; height: 18px; left: 25px; top: 20px;}.scene1 .title{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -115px; width: 188px; height: 22px; left: 25px; top: 55px;}.scene1 .copy{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px 0px; width: 191px; height: 56px; left: 25px; top: 90px;}.scene1 .cta{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -142px; width: 131px; height: 33px; left: 25px; top: 180px;}.chopper{position: absolute; top: -600px; left: -850px;}&lt;/style&gt; &lt;script type='text/javascript'&gt;var clickTag='https://www.google.com.au'; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;a href='javascript:window.open(window.clickTag)'&gt; &lt;div id='banner'&gt; &lt;div class='scene0'&gt; &lt;div class='logo'&gt;&lt;/div&gt;&lt;div class='fee'&gt;&lt;/div&gt;&lt;div class='gone'&gt;&lt;/div&gt;&lt;div class='dolar'&gt;&lt;/div&gt;&lt;div class='l_5'&gt;&lt;/div&gt;&lt;div class='l_f'&gt;&lt;/div&gt;&lt;div class='l_e1'&gt;&lt;/div&gt;&lt;div class='l_e2'&gt;&lt;/div&gt;&lt;div class='hand'&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class='scene1'&gt; &lt;div class='cover'&gt;&lt;/div&gt;&lt;div class='purple_stripe'&gt;&lt;/div&gt;&lt;div class='logo_w'&gt;&lt;/div&gt;&lt;div class='title'&gt;&lt;/div&gt;&lt;div class='copy'&gt;&lt;/div&gt;&lt;div class='cta'&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class='chopper'&gt; &lt;svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='2002.5' height='2002.5' viewBox='0 0 2002.5 2002.5' &gt; &lt;defs&gt; &lt;mask id='maskR1'&gt; &lt;circle id='pie1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;/mask&gt; &lt;mask id='maskP1'&gt; &lt;circle id='pie2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;/mask&gt; &lt;mask id='maskP2'&gt; &lt;circle id='pie3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;/mask&gt; &lt;/defs&gt; &lt;g mask='url(#maskR1)'&gt; &lt;circle id='pieChange1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #990000; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;/g&gt; &lt;g mask='url(#maskP1)'&gt; &lt;circle id='pieChange2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ff1fdd; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;g id='logoChange2'&gt; &lt;path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/&gt; &lt;/g&gt; &lt;/g&gt; &lt;g mask='url(#maskP2)'&gt; &lt;circle id='pieChange3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #991ad6; stroke-miterlimit: 10; stroke-width: 2000px; '/&gt; &lt;g id='logoChange3'&gt; &lt;path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/div&gt;&lt;/div&gt;&lt;/a&gt; &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'&gt;&lt;/script&gt; &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'&gt;&lt;/script&gt; &lt;script&gt;!function(e,t){'object'==typeof exports&amp;&amp;'undefined'!=typeof module?t(exports):'function'==typeof define&amp;&amp;define.amd?define(['exports'],t):t((e=e||self).window=e.window||{})}(this,function(e){'use strict';function i(){return'undefined'!=typeof window}function j(){return a||i()&amp;&amp;(a=window.gsap)&amp;&amp;a.registerPlugin&amp;&amp;a}function m(e){return Math.round(1e4*e)/1e4}function n(e){return parseFloat(e)||0}function o(e,t){var r=n(e);return~e.indexOf('%')?r/100*t:r}function p(e,t){return n(e.getAttribute(t))}function r(e,t,r,i,s,o){return P(Math.pow((n(r)-n(e))*s,2)+Math.pow((n(i)-n(t))*o,2))}function s(e){return console.warn(e)}function t(e){return'non-scaling-stroke'===e.getAttribute('vector-effect')}function w(e){if(!(e=v(e)[0]))return 0;var n,i,o,a,f,h,d,l=e.tagName.toLowerCase(),u=e.style,c=1,g=1;t(e)&amp;&amp;(g=e.getScreenCTM(),c=P(g.a*g.a+g.b*g.b),g=P(g.d*g.d+g.c*g.c));try{i=e.getBBox()}catch(e){s('Some browsers wont measure invisible elements (like display:none or masks inside defs).')}var _=i||{x:0,y:0,width:0,height:0},y=_.x,w=_.y,x=_.width,m=_.height;if(i&amp;&amp;(x||m)||!k[l]||(x=p(e,k[l][0]),m=p(e,k[l][1]),'rect'!==l&amp;&amp;'line'!==l&amp;&amp;(x*=2,m*=2),'line'===l&amp;&amp;(y=p(e,'x1'),w=p(e,'y1'),x=Math.abs(x-y),m=Math.abs(m-w))),'path'===l)a=u.strokeDasharray,u.strokeDasharray='none',n=e.getTotalLength()||0,c!==g&amp;&amp;s('Warning: &lt;path&gt; length cannot be measured when vector-effect is non-scaling-stroke and the element isnt proportionally scaled.'),n*=(c+g)/2,u.strokeDasharray=a;else if('rect'===l)n=2*x*c+2*m*g;else if('line'===l)n=r(y,w,y+x,w+m,c,g);else if('polyline'===l||'polygon'===l)for(o=e.getAttribute('points').match(b)||[],'polygon'===l&amp;&amp;o.push(o[0],o[1]),n=0,f=2;f&lt;o.length;f+=2)n+=r(o[f-2],o[f-1],o[f],o[f+1],c,g)||0;else'circle'!==l&amp;&amp;'ellipse'!==l||(h=x/2*c,d=m/2*g,n=Math.PI*(3*(h+d)-P((3*h+d)*(h+3*d))));return n||0}function x(e,t){if(!(e=v(e)[0]))return[0,0];t=t||w(e)+1;var r=h.getComputedStyle(e),i=r.strokeDasharray||'',s=n(r.strokeDashoffset),o=i.indexOf(',');return o&lt;0&amp;&amp;(o=i.indexOf(' ')),t&lt;(i=o&lt;0?t:n(i.substr(0,o)))&amp;&amp;(i=t),[-s||0,i-s||0]}function y(){i()&amp;&amp;(h=window,l=a=j(),v=a.utils.toArray,d=-1!==((h.navigator||{}).userAgent||'').indexOf('Edge'))}var a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi,k={rect:['width','height'],circle:['r','r'],ellipse:['rx','ry'],line:['x2','y2']},P=Math.sqrt,f={version:'3.6.0',name:'drawSVG',register:function register(e){a=e,y()},init:function init(e,r){if(!e.getBBox)return!1;l||y();var i,s,a,f=w(e);return this._style=e.style,this._target=e,r+''=='true'?r='0 100%':r?-1===(r+'').indexOf(' ')&amp;&amp;(r='0 '+r):r='0 0',s=function _parse(e,t,n){var r,i,s=e.indexOf(' ');return i=s&lt;0?(r=void 0!==n?n+'':e,e):(r=e.substr(0,s),e.substr(s+1)),r=o(r,t),(i=o(i,t))&lt;r?[i,r]:[r,i]}(r,f,(i=x(e,f))[0]),this._length=m(f),this._dash=m(i[1]-i[0]),this._offset=m(-i[0]),this._dashPT=this.add(this,'_dash',this._dash,m(s[1]-s[0])),this._offsetPT=this.add(this,'_offset',this._offset,m(-s[0])),d&amp;&amp;(a=h.getComputedStyle(e)).strokeLinecap!==a.strokeLinejoin&amp;&amp;(s=n(a.strokeMiterlimit),this.add(e.style,'strokeMiterlimit',s,s+.01)),this._live=t(e)||~(r+'').indexOf('live'),this._props.push('drawSVG'),1},render:function render(e,t){var n,r,i,s,o=t._pt,a=t._style;if(o){for(t._live&amp;&amp;(n=w(t._target))!==t._length&amp;&amp;(r=n/t._length,t._length=n,t._offsetPT.s*=r,t._offsetPT.c*=r,t._dashPT?(t._dashPT.s*=r,t._dashPT.c*=r):t._dash*=r);o;)o.r(e,o.d),o=o._next;i=t._dash||e&amp;&amp;1!==e&amp;&amp;1e-4||0,n=t._length-i+.1,s=t._offset,i&amp;&amp;s&amp;&amp;i+Math.abs(s%t._length)&gt;t._length-.2&amp;&amp;(s+=s&lt;0?.1:-.1)&amp;&amp;(n+=.1),a.strokeDashoffset=i?s:s+.001,a.strokeDasharray=n&lt;.2?'none':i?i+'px,'+n+'px':'0px, 999999px'}},getLength:w,getPosition:x};j()&amp;&amp;a.registerPlugin(f),e.DrawSVGPlugin=f,e.default=f;if (typeof(window)==='undefined'||window!==e){Object.defineProperty(e,'__esModule',{value:!0})}else{delete e.default}}); &lt;/script&gt; &lt;script&gt;(function (){window.onload=function (){initBanner();}; function initBanner(){gsap.registerPlugin(DrawSVGPlugin); tl=new TimelineLite({repeat: 2, repeatDelay: 2, onComplete: function (){},}); TweenLite.defaultEase=Cubic.easeInOut; showFrames(tl);}function generateFrame0(){var tl=new TimelineLite(); tl.addLabel('startf0'); tl.add( TweenLite.to('.hand', 0.25,{x: -10, y: -90, ease: 'none'}), 'startf0+=.5' ); tl.add( TweenLite.to('.hand', 0.25,{x: 40, y: -10, ease: 'none'}), '&gt;' ); tl.add( TweenLite.to('.dolar', 0.35,{autoAlpha: 0, ease: 'none'}), '&lt;' ); tl.add( TweenLite.to('.l_5', 0.35,{autoAlpha: 0, ease: 'none'}), '&lt;' ); tl.add( TweenLite.to('.hand', 0.25,{x: 30, y: -90, ease: 'none'}), '&gt;' ); tl.add( TweenLite.to('.hand', 0.25,{x: 65, y: -10, ease: 'none'}), '&gt;' ); tl.add( TweenLite.to('.l_f', 0.35,{autoAlpha: 0, ease: 'none'}), '&lt;' ); tl.add( TweenLite.to('.hand', 0.25,{x: 75, y: -90, ease: 'none'}), '&gt;' ); tl.add( TweenLite.to('.hand', 0.45,{x: 115, y: 90, ease: 'none'}), '&gt;' ); tl.add( TweenLite.to('.l_e1', 0.25,{autoAlpha: 0, ease: 'none'}), '&lt;' ); tl.add( TweenLite.to('.l_e2', 0.25,{autoAlpha: 0, ease: 'none'}), '&lt;' ); return tl;}function generateChopper(){gsap.set('circle',{transformOrigin: 'center center'}); var tl=new TimelineLite(); tl.addLabel('startChopper'); tl.add( TweenLite.fromTo( '#pie1', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.5' ); tl.add( TweenLite.fromTo( '#pie2', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.8' ); tl.add( TweenLite.to('#logoChange2', 1.5,{scale: 0.9, transformOrigin: 'center center', ease: 'sine.inOut',}), 'startChopper+=1.5' ); tl.add( TweenLite.fromTo( '#pie3', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=1.1' ); tl.add( TweenLite.fromTo( '#logoChange3', 1.5,{scale: 0.8, transformOrigin: 'center center', ease: 'sine.inOut',},{scale: 0.6, ease: 'sine.inOut'}), 'startChopper+=2' ); return tl;}function generateFrame1(){var tl=new TimelineLite(); tl.addLabel('startf1'); tl.add( TweenLite.from('.cover', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), 'startChopper-=.5' ); tl.add( TweenLite.from('.purple_stripe', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '&lt;' ); tl.add( TweenLite.from('.logo_w', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '&lt;' ); tl.add( TweenLite.from('.title', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '&lt;' ); tl.add( TweenLite.from('.copy', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '&lt;' ); tl.add( TweenLite.from('.cta', 1,{autoAlpha: 0, ease: Strong.easeInOut}), '&lt;' ); return tl;}function showFrames(tl){var addedtime=0.3; var frameInterval=1.5 + addedtime; var aniSpeed=1.5, aniSpeedSlow=aniSpeed + 0.5, aniSpeedFast=aniSpeed - 0.5; var loopInterval=2; tl.add('FrameStart0'); tl.add(generateFrame0(), 'FrameStart0+=.5'); tl.add('FrameStartChopper'); tl.add(generateChopper()); tl.add('FrameStart1'); tl.add(generateFrame1(), 'FrameStart1-=2.2'); document.getElementsByClassName('scene0')[0].style.display='block'; document.getElementsByClassName('scene1')[0].style.display='block';}})(); &lt;/script&gt; &lt;/body&gt;&lt;/html&gt;&quot;
  }
  </code></pre>
  <p>The value to the <code>res</code> key is a compiled HTML string that I have to use on the frontend as an <code>iframe</code>'s <code>srcdoc</code> like I've done in this <strong><a href="https://stackblitz.com/edit/angular-ivy-zafbg6?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">StackBlitz sample</a></strong>.</p>
  <p>But for some reason it's not being considered as a valid string in the context of JSON.</p>
  <p>I tried:</p>
  <ol>
  <li><p>Linting the JSON using <a href="https://jsonlint.com/" rel="nofollow noreferrer"><code>JSONLint</code></a> but that errors out with the error:</p>
  <blockquote>
  <p>Error: Parse error on line 2: <br>
  {  &quot;res&quot;: &quot;&lt;htm <br>
  ---------^ <br>
  Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'</p>
  </blockquote>
  </li>
  <li><p>Checking whether it can be <code>stringify</code>ed using <code>JSON.stringify</code> without any errors.</p>
  </li>
  <li><p>Checking the type of the compiled html string using <code>typeof</code> and that's string too.</p>
  </li>
  <li><p>Checking <a href="https://stackoverflow.com/questions/41876830/json-bad-string-error">JSON Bad String Error</a> but not sure what the issue is, with my string and how can I figure out at what point is the string not correct.</p>
  </li>
  </ol>
  <p>I'm also curious why a valid string in <code>JavaScript</code>'s context is not being considered valid in the context of JSON. Am I missing something here?</p>