Jquery Parse JSON coming from an html element
<p>I am trying to parse some JSON coming from the server into an object I can use in Javascript. The JSON is saved by the server inside a span. When I click on the action button, it should get the JSON and parse it into an object. Unfortunately, I get an exception. Please see the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  $("#btn").click(function(elem){
    var elem = $("#content");
    var html = elem.html();
    console.log(html);
    var x = JSON.parse(html);
    console.log(x);
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
    &lt;button id="btn"&gt;Action&lt;/button&gt;
    &lt;br/&gt;&lt;br/&gt;
     &lt;span id="content"&gt;{"test" : "&lt;a href=\"http://cnn.com\"&gt;CNN&lt;/a&gt; Hello"}&lt;/span&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>I also tried it with the content in the span not escaping the ":</p>

<pre><code>&lt;span id="content"&gt;{"test" : "&lt;a href="http://cnn.com"&gt;CNN&lt;/a&gt; Hello"}&lt;/span&gt;
</code></pre>

<p>Any idea how to solve?</p>

<p>Note for background: this is used inside an angular app which needs to receive the json to init the model. </p>