TheGuyWhoCodes TheGuyWhoCodes - 1 month ago 5
HTML Question

Using .replace to replace text with HTML?

I want to replace text with an image using jQuery. I have been using the .replace function to replace text with more text. How would I replace the text with an html tag, like an <img> tag.

Here is my code:

function wow() {
$('.messageBody').each(function() {
var text = $(this).text();
var image = '<img class = "emote" src = "trump.png">'
$(this).text(text.replace(':trump:', image.outterHTML));
});
}
setInterval(wow, 1000);


Here is the HTML:

<span class="messageBody">:trump:</span>

Answer

If you use .html instead of .text it will work. Change this line:

  $(this).text(text.replace(':trump:', image.outterHTML));

to this:

  $(this).html(text.replace(':trump:', image));

Note: because image is a string you don't need the .outerHTML.

If the messageBody has more than just text inside (it contains HTML) then you'll also want to change this line:

  var text = $(this).text();

to this:

  var text = $(this).html();

so the full code would be:

function wow() {
  $('.messageBody').each(function() {
      var text = $(this).html();
      var image = '<img class="emote" src="trump.png">';
      $(this).html(text.replace(':trump:', image));
  });
}
setInterval(wow, 1000);
Comments