Using .replace to replace text with HTML?

Question

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>

winhowes · Accepted Answer · 2016-10-16 23:19:25Z

7

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);

answered Oct 16, 2016 at 23:19

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2016-10-16 23:26:43Z

2

Can use html(function) which also will loop all instances

$('.messageBody').html(function(_, existingHtml){
    var image = '<img class = "emote" src = "trump.png">'
    return existingHtml.replace(':trump', image);
});

Using text() strips any html tags

answered Oct 16, 2016 at 23:26

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

ariagno Over a year ago

Thanks for this! I didn't understand how to get the code to loop every time another message appeared, Thanks bunches!

Unitrai · Accepted Answer · 2016-10-16 23:33:21Z

1

Change your code to:

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

answered Oct 16, 2016 at 23:33

Unitrai

2963 silver badges5 bronze badges

Collectives™ on Stack Overflow

Using .replace to replace text with HTML?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related