javascript - Using .replace to replace text with HTML? - Stack Overflow

admin管理员组

文章数量:1344559

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>

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 17, 2016 at 1:28 Dave Thomas 3,84722 gold badges3636 silver badges4444 bronze badges asked Oct 16, 2016 at 23:16 ariagnoariagno 60122 gold badges1717 silver badges3030 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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);

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

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

本文标签： javascriptUsing replace to replace text with HTMLStack Overflow