Estoy intentando modificar esta respuesta para tomar el código BCCode clásico [img]{url}[/img] y mostrar una imagen html de él. Como se ve en mi fragmento de código, he podido hacer con éxito algo similar con [b]text[/b] . Sin embargo, por alguna razón, con [img][/img] la imagen no se muestra en absoluto.
Entonces, ¿cómo puedo usar .replace() y .html() para convertir texto sin formato en una etiqueta de imagen?
$('#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>El problema de su código es reemplazar la cadena para etiquetar en dos partes. Cuando javascript intenta insertar <img src=" o "> en html, el navegador no lo inserta porque es una etiqueta no válida. Use ambos .replace() después de la cadena para la cadena en una función .html() .
$('#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>