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

Try this :

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