如何使用“.replace（）”和“.html（）”将纯文本转换为图像标记？

Question

I am attempting to modify this answer in order to take classic BCCode [img]{url}[/img] and display an html image from it. As seen in my code snippet, I have been able to successfully do something similar with [b]text[/b] . For some reason, though, with [img][/img] the image doesn't display at all.

So, how can I use .replace() and .html() to turn plaintext into an image tag?

 $('#boldText').click(function() { $('#bold').html(function(i, htm) { return htm.replace(/\\[b\\]/g, '<b>'); }); // Replace opening tag $('#bold').html(function(i, htm) { return htm.replace(/\\[\\/b\\]/g, '</b>'); }); // Replace closing tag }); $('#createImage').click(function() { $('#image').html(function(i, htm) { return htm.replace(/\\[img\\]/g, '<img src="'); }); // Replace opening tag $('#image').html(function(i, htm) { return htm.replace(/\\[\\/img\\]/g, '">'); }); // Replace closing tag }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="bold"> [b]bold text[/b] </p> <button id="boldText"> Make above text bold </button> <p id="image"> [img]http://i.imgur.com/mFJlvPf.jpg[/img] </p> <button id="createImage"> Make above text into image </button> 

Answer 1

Problem of your code is in replacing string to tag in two part. When javascript trying to insert <img src=" or "> into html, browser doesn't insert it because it is invalid tag. Use both of .replace() after string for chain in one .html() function.

 $('#boldText').click(function() { $('#bold').html(function(i, htm) { return htm.replace(/\\[b\\]/g, '<b>').replace(/\\[\\/b\\]/g, '</b>'); }); }); $('#createImage').click(function() { $('#image').html(function(i, htm) { return htm.replace(/\\[img\\]/g, '<img src="').replace(/\\[\\/img\\]/g, '">'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="bold"> [b]bold text[/b] </p> <button id="boldText"> Make above text bold </button> <p id="image"> [img]http://i.imgur.com/mFJlvPf.jpg[/img] </p> <button id="createImage"> Make above text into image </button>