using $.each to iterate over an array of objects - problems with regular expression
<p>I have been using the <code>$.each</code> function and some templating so that I can effectively populate/replace my HTML string stored in the <code>temp</code> variable with the <code>title</code> and <code>thumbnail</code> property of the objects stored in the <code>content</code> array.   </p>

<p>So for example within the callback function of <code>$.each</code> a regular expression finds the <code>{{title}}</code>, it will replace <code>{{title}}</code> with the contents of <code>obj.title</code>, so that we essentially replace it with the string 'Speak of the devil and he shall appear' which is the title property of the object which is iterated over. </p>

<p>The problem I have found is that when I come to append this HTML string (<code>temp variable</code>) to the body. My <code>img</code> HTML tag has been outputted in the wrong way and the contents of <code>obj.title</code> are creating undesired attributes in my <code>img</code> tag</p>

<p>HTML outputted:</p>

<pre><code>&lt;h2&gt; Speak of the devil and he shall appear &lt;/h2&gt;
&lt;img appear="" shall="" he="" and="" devil="" the="" of="" alt="Speak" src="images/bane.jpg"&gt;
</code></pre>

<p>Here is my template:</p>

<pre><code>&lt;script id="blogTemplate" type="chris/template"&gt;
    &lt;h2&gt; {{title}} &lt;/h2&gt;
    &lt;img src={{thumbnail}} alt={{title}}&gt;
&lt;/script&gt;
</code></pre>

<p>And here is my jQuery code:</p>

<pre><code>(function() {

        var content = [
            {
                title: 'Speak of the devil and he shall appear',   
                thumbnail: 'images/bane.jpg',
            },

            {
                title: 'Me the joker',   
                thumbnail: 'images/Joker.jpg',
            }
        ];

            var template = $.trim( $('#blogTemplate').html() );

        $.each( content, function( index, obj ) {  

            var temp = template.replace( /{{title}}/ig, obj.title )
                               .replace( /{{thumbnail}}/ig, obj.thumbnail );
            console.log(temp);

            $('body').append(temp);
        });

    })();
</code></pre>
