javascript - 如何使用 jQuery chop 文本但保留 HTML 格式？

Question

如何使用 jQuery chop 文本但保留 HTML？尝试使用以下代码，但不幸的是没有返回 HTML 格式。

var truncate = function() {
  $('p.truncated').text(function(index, oldText) {
    if (oldText.length > 20) {
      return '...' + oldText.substr(-25);
    }
    return oldText;
  });
}

如果您运行代码片段，您将看到我正在寻找的内容。

var truncate = function() {
  $('p.truncated').text(function(index, oldText) {
    if (oldText.length > 20) {
      return '...' + oldText.substr(-25);
    }
    return oldText;
  });
}

truncate();




var truncate2 = function() {
  $("p.truncated2").each(function() {
    //var theContent = $(this).text();
    var theContent = $(this).html();
    var n = theContent.substr(-25);
    $(this).html( '...' +n );
  });

}

truncate2();

p {
  margin: 0 0 30px 0;
  display: block;
  padding: 5px;
}
streak {
  color: green;
}
double {
  color: orange;
}
p span {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How to make something like this...
<p class="sheet">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
...becomes something like this with jquery?
<p>
  ...
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
<hr />Here is a try with jquery but it return text without html elements.
<p class="truncated">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
The second try
<p class="truncated2">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
How can I keep html elements?

Answer 1

如果你想继续计算字符数，你也可以使用 range 对象。您设置要删除的范围，它也会删除节点。因此，您可以操作文本，但保留 html 标签。

var truncate = function() {
  var range_all = document.createRange();
  range_all.selectNodeContents(document.getElementsByClassName('truncated')[0]);
  if (range_all.endOffset > 20) {
    range_all.setEnd(document.getElementsByClassName('truncated')[0], range_all.endOffset - 12);
    range_all.deleteContents();
    $('p.truncated').html('... ' + $('p.truncated').html());
  }

}

truncate();




var truncate2 = function() {
  $("p.truncated2").each(function() {
    //var theContent = $(this).text();
    var theContent = $(this).html();
    var n = theContent.substr(-25);
    $(this).html('...' + n);
  });

}

truncate2();

p {
  margin: 0 0 30px 0;
  display: block;
  padding: 5px;
}
streak {
  color: green;
}
double {
  color: orange;
}
p span {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How to make something like this...
<p class="sheet">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
...becomes something like this with jquery?
<p>
  ...
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
<hr />If text is longer than 25 character, select until 12th and delete selection. Then add '...' at the beginning.
<p class="truncated">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
The second try
<p class="truncated2">
  <streak>start</streak>
  <streak>1</streak>
  <streak>2</streak>
  <double>3</double>
  <double>4</double>
  <span>5</span>
  <span>6</span>
  <streak>7</streak>
  <streak>8</streak>
  <double>9</double>
  <double>10</double>
  <streak>end</streak>
</p>
How can I keep html elements?