title: Uncaught SyntaxError: Unexpected token ) when parsing JSON string with HTML inside
body: <p>This problem has been clogging up my error log for quite a while now. The function is doing what I want it to do, but this message is driving me crazy!</p>
  
  <pre><code>function togglePreview( link_id ) {  
          var data = { ajax_cmd: 'get_embed_html', link_id: link_id };
          jQuery.post("?", data, function(json) {
              if (json.html) {
                  jQuery( "#listen_" + link_id ).html( json.html );
              }
          }, "json"); 
  }
  </code></pre>
  
  <p>Server side, I have a couple of lines of PHP:</p>
  
  <pre><code>&lt;?php
  header('Content-Type: application/json');
  $html = get_embed_html( $_REQUEST['link_id'] );
  echo json_encode( array("html" =&gt; $html) ); 
  ?&gt;
  </code></pre>
  
  <p>The JSON string from the server outputs as follows:</p>
  
  <pre><code>{"html":"&lt;iframe frameborder=0 height=400 width=100% src='http:\/\/www.youtube.com\/watch?v=ozhtg6FuD8A'&gt;&lt;\/iframe&gt;&lt;noscript&gt;JavaScript is required to load the comments.&lt;\/noscript&gt;\n&lt;div class=\"inline-comments-container\" name=\"comments\"&gt;\n    &lt;div id=\"inline_comments_ajax_handle\" class=\"last-child\" data-post_id=\"26\"&gt;\n    &lt;div id=\"inline_comments_ajax_target\" style=\"display: none;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"inline-comments-loading-icon\"&gt;Loading Comments&amp;#8230;&lt;\/div&gt;\n    &lt;input type=\"hidden\" name=\"inline_comments_nonce\" value=\"c16a7993ab\" id=\"inline_comments_nonce\" \/&gt;\n            &lt;div class=\"inline-comments-content\"&gt;\n            &lt;div class=\"inline-comments-p\"&gt;\n                &lt;form action=\"javascript:\/\/\" method=\"POST\" id=\"default_add_comment_form\"&gt;\n                    &lt;input type=\"hidden\" name=\"inline_comments_nonce\" value=\"c16a7993ab\" id=\"inline_comments_nonce\" \/&gt;\n                    &lt;span class=\"inline-comments-profile-pic-container\"&gt;&lt;img alt='' src='https:\/\/graph.facebook.com\/FACEBOOKID\/picture?type=large' class='avatar avatar-32 photo' height='32' width='32' \/&gt;&lt;\/span&gt;                    &lt;textarea placeholder=\"Press enter to submit comment&amp;#8230;\" tabindex=\"4\" id=\"comment\" name=\"comment\" id=\"inline-comments-textarea\" class=\"inline-comments-auto-expand submit-on-enter\"&gt;&lt;\/textarea&gt;\n                    &lt;!--&lt;span class=\"inline-comments-more-handle\"&gt;&lt;a href=\"#\"&gt;more&lt;\/a&gt;&lt;\/span&gt;--&gt;\n                    &lt;div class=\"inline-comments-more-container\" style=\"display: none;\"&gt;\n                        &lt;div class=\"inline-comments-field\"&gt;&lt;input type=\"text\" tabindex=\"5\" name=\"user_name\" id=\"inline_comments_user_name\" placeholder=\"Name&amp;#8230\" value=\"greeny\"  \/&gt;&lt;\/div&gt;\n                        &lt;div class=\"inline-comments-field\"&gt;&lt;input type=\"email\" required tabindex=\"5\" name=\"user_email\" id=\"inline_comments_user_email\" placeholder=\"Email&amp;#8230\" value=\"email@example.com\"  \/&gt;&lt;\/div&gt;\n                        &lt;div class=\"inline-comments-field\"&gt;&lt;input type=\"url\" required tabindex=\"6\" name=\"user_url\" id=\"inline_comments_user_url\" placeholder=\"Website&amp;#8230\" value=\"\" \/&gt;&lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;"}
  </code></pre>
  
  <p>When calling the JS function togglePreview(4), i receive the following error code:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token )</p>
  </blockquote>
  
  <p>Hopefully it's something very simple I've overlooked!</p>