我在使用jquery
替换我的字符串上的一个或多个单词以标记HTML时遇到问题问题是当我运行代码时,如果我在1个字符串中有两个或更多单词<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>
let set = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
key4: 'ignored',
key5: 'also ignored'
}
答案 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(/<b>/g, '<b>').replace(/<b>/g, '</b>'));