如何替換字符串以標記HTML

Question

我在用jquery替換字符串上的一個或多個單詞以標記HTML時遇到問題

問題是當我運行代碼時，如果我有兩個單詞或更多帶有<b>單詞<b> 在一個字符串中，僅第一個單詞替換為<b>

這是我的摘錄：

 $('.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

一種快速的解決方案是使用DOMParser parseFromString 。 像這樣：

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

在您的代碼中：

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

見這也。 干杯!

Answer 2

嘗試這個 ：

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