How to replace string to tag HTML

Question

i Have problem for replace one or more word on my string to tag HTML using jquery

The problem is when i run the code, if i have two word or more with <b> in 1 string, just the first word replace to <b>

Here my Snippet :

 $('.ibox-comment').find('.social-comment').find('#comment').each(function() { var $this = $(this); var t = $this.text(); $this.html(t.replace('&lt;b&gt;', '<b>').replace('&lt;/b&gt;', '</b>')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ibox-comment"> <div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;"> <input type="hidden" name="id" id="id" value="129"> <div class="media-body" style="margin-left: 75px; text-align: left;"> <strong> <span id="name" class="pull-right">Liam Kelly</span> </strong> <label id="status" class="label label-default">Unread</label> <br> <span id="comment" style="white-space:pre-line">&amp;lt;b&amp;gt;Pierre Charnoz&amp;lt;/b&amp;gt; &amp;lt;b&amp;gt;Justin Williams&amp;lt;/b&amp;gt;</span> <br> <!--<a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> ---> <em><br> <small id="date" class="text-muted">4 hours ago</small> <small id="datehidden" class="text-muted">October 24, 2017 at 18:52</small> </em> </div> <figure style="margin-right: 0px; margin-left: 10px;" class="pull-right"> <img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src=""> <img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src=""> </figure> </div> <div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;"> <input type="hidden" name="id" id="id" value="130"> <div class="media-body" style="margin-left: 75px; text-align: left;"> <strong> <span id="name" class="pull-right">Liam Kelly</span> </strong> <label id="status" class="label label-default">Unread</label> <br> <span id="comment" style="white-space:pre-line">&amp;lt;b&amp;gt;Jim Yarbrough&amp;lt;/b&amp;gt; kesini aja &amp;lt;b&amp;gt;jules ferry&amp;lt;/b&amp;gt;</span> <br> <!--<a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> ---> <em><br> <small id="date" class="text-muted">4 hours ago</small> <small id="datehidden" class="text-muted">October 24, 2017 at 18:59</small> </em> </div> <figure style="margin-right: 0px; margin-left: 10px;" class="pull-right"> <img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src=""> <img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src=""> </figure> </div> <div class="social-comment flex-comment-you" style="display: flex; justify-content: flex-end;"> <input type="hidden" name="id" id="id" value="131"> <div class="media-body" style="margin-left: 75px; text-align: left;"> <strong> <span id="name" class="pull-right">Liam Kelly</span> </strong> <label id="status" class="label label-default">Unread</label> <br> <span id="comment" style="white-space:pre-line">&amp;lt;b&amp;gt;Jim Yarbrough&amp;lt;/b&amp;gt; &amp;lt;b&amp;gt;Pierre Charnoz&amp;lt;/b&amp;gt; &amp;lt;b&amp;gt;sdfsdf sdfsdf&amp;lt;/b&amp;gt;</span> <br> <!--<a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> ---> <em><br> <small id="date" class="text-muted">7 minutes ago</small> <small id="datehidden" class="text-muted">October 24, 2017 at 22:23</small> </em> </div> <figure style="margin-right: 0px; margin-left: 10px;" class="pull-right"> <img data-name="LK" id="pp" class="img-feedback img-circle no-borders hidden-xs" alt="image" src=""> <img data-name="LK" id="pp" class="img-feedback-small img-circle no-borders visible-xs" alt="image" src=""> </figure> </div> </div> 

Answer 1

A quick solution would be to use parseFromString from DOMParser . Like this:

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

And in your code:

$('.ibox-comment').find('.social-comment').find('#comment').each(function() {
  var $this = $(this);
  var t = $this.text();
  console.log(t);
  console.log(htmlDecode(t));
});

See this also. Cheers!

Answer 2

尝试这个 ：

$this.html(t.replace(/&lt;b&gt;/g, '<b>').replace(/&lt;b&gt;/g, '</b>'));