[英]How to replace string to tag HTML
我在用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('<b>', '<b>').replace('</b>', '</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">&lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;Justin Williams&lt;/b&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">&lt;b&gt;Jim Yarbrough&lt;/b&gt; kesini aja &lt;b&gt;jules ferry&lt;/b&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">&lt;b&gt;Jim Yarbrough&lt;/b&gt; &lt;b&gt;Pierre Charnoz&lt;/b&gt; &lt;b&gt;sdfsdf sdfsdf&lt;/b&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>
一种快速的解决方案是使用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));
});
见这也。 干杯!
尝试这个 :
$this.html(t.replace(/<b>/g, '<b>').replace(/<b>/g, '</b>'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.