title: How can I use ".replace()" and ".html()" to turn plaintext into an image tag?
body: <p>I am attempting to modify <a href="https://stackoverflow.com/a/14944985/6111540">this answer</a> in order to take classic BCCode <code>[img]{url}[/img]</code> and display an html image from it. As seen in my code snippet, I have been able to successfully do something similar with <code>[b]text[/b]</code>. For some reason, though, with <code>[img][/img]</code> the image doesn't display at all.</p>
  
  <p>So, <strong>how can I use <code>.replace()</code> and <code>.html()</code> to turn plaintext into an image tag?</strong></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>$('#boldText').click(function() {
    $('#bold').html(function(i, htm) {
      return htm.replace(/\[b\]/g, '&lt;b&gt;');
    }); // Replace opening tag
    $('#bold').html(function(i, htm) {
      return htm.replace(/\[\/b\]/g, '&lt;/b&gt;');
    }); // Replace closing tag
  });
  $('#createImage').click(function() {
    $('#image').html(function(i, htm) {
      return htm.replace(/\[img\]/g, '&lt;img src="');
    }); // Replace opening tag
    $('#image').html(function(i, htm) {
      return htm.replace(/\[\/img\]/g, '"&gt;');
    }); // Replace closing tag
  });</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;p id="bold"&gt;
    [b]bold text[/b]
  &lt;/p&gt;
  &lt;button id="boldText"&gt;
    Make above text bold
  &lt;/button&gt;
  &lt;p id="image"&gt;
    [img]http://i.imgur.com/mFJlvPf.jpg[/img]
  &lt;/p&gt;
  &lt;button id="createImage"&gt;
    Make above text into image
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>