如何在某些 HTML 标记后剪切字符串？

Question

我想在 </b> 标签后剪切文本。

例如，

<div class="quote"><b> Quote from: Bob </b>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>

应截断为

<div class="quote"><b> Quote from: Bob </b>

如何存档？

这是我想出的：

https://jsfiddle.net/Babr/2q4940h1/8/

Answer 1

过滤掉 div 内的文本节点并删除它们。

$('.quote')
  // get all child nodes
  .contents()
  // filter out text nodes
  .filter(function() {
    return this.nodeType === 3;
  })
  // remove them
  .remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote"><b> Quote from: Bob </b> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>

或使用带回调的 html() 方法将 HTML 内容替换为 b 标签元素。

$('.quote').html(function() {
  // return the inner b tag
  return $(this).find('b');
  // or you just want to remove the text nodes then 
  // get all elements using $(this).children()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote"><b> Quote from: Bob </b> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>

Answer 2

对于您的情况，您可以这样做：

$(".quote").html($(".quote").children());

将被截断为：

<div class="quote"><b> Quote from: Bob </b></div>

FIDDLE

Answer 3

像这样。

var bTag = $(".quote").find("b");
var textThatMatters = bTag.text() + ' reads more...';
bTag.text(textThatMatters)
$(".quote").empty().append(bTag);

这里是 jsFiddle.

Answer 4

另一种选择

$('.quote').children('b').text()

如何在某些 HTML 标记后剪切字符串？

How to cut string after certain HTML tag?

javascript

jquery

truncate