如何将字符串替换为标记HTML

时间:2017-10-24 16:12:19

标签: javascript jquery string replace

我在使用jquery

替换我的字符串上的一个或多个单词以标记HTML时遇到问题

问题是当我运行代码时,如果我在1个字符串中有两个或更多单词<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>
let set = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
  key4: 'ignored',
  key5: 'also ignored'
}

2 个答案:

答案 0 :(得分:1)

快速解决方案是使用parseFromString中的DOMParser。像这样:

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

另见this。干杯!

答案 1 :(得分:0)

试试这个:

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