JavaScript / jQuery-在切片文本內容中保留錨標記

Question

場景

我有一個包含鏈接的描述。 如果描述包含100個以上的字符，我會將其切片以僅包含從第一個字符到第100個字符的文本。 我還將顯示一個省略號和一個“更多”鏈接，該鏈接會在單擊時顯示其余內容。

問題

切片時，它會剝離內容中的鏈接。

我的想法/所需結果

我正在使用jQuery的.text（）方法來獲取描述的確切長度，以始終保持切片的一致性。 如果我想的沒錯，.text（）只會獲取原始內容，這就是為什么錨標記被剝離的原因。 但是，如果我使用.html（）方法，將很難保持文本切片位置（我需要）的一致性，因為它將同時計算那些html標簽及其屬性的字符。 這就是我所堅持的地方。

最終，我希望有一種方法來將描述切成100個字符，同時保留鏈接。在每個頁面上我還將有多個描述，所以我希望有一種方法可以在單擊時擴展和最小化每個單獨的獨特描述。

在CodePen上玩耍： https ://codepen.io/andrewgarrison/pen/BdJQGz/

 $(document).ready(function () { var minimized_elements = $('p.description'); var minimize_character_count = 99; minimized_elements.each(function () { var t = $(this).text(); if (t.length < minimize_character_count) return; $(this).html( t.slice(0, minimize_character_count) + '<span>... </span><a href="#" class="more">More</a>' + '<span style="display:none;">' + t.slice(minimize_character_count, t.length) + ' <a href="#" class="less">Less</a></span>' ); }); $('a.more', minimized_elements).click(function (event) { event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); }); $('a.less', minimized_elements).click(function (event) { event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Sliced Text</h3> <p class="description">This product is super hot. You can go to <a href="http://www.someurlgoeshere.org">this awesome website</a> and order it right now! But wait, that's not all. If you buy three you get 20 more free. That's right. Buy now from <a href="#">here</a> and this could all be yours.</p> 

謝謝！

Answer 1

您可以使用jQuery內容功能來獲取元素的子級列表，包括文本節點。

然后，您可以遍歷子級並將其添加，直到字符數超過最大數量。 但是，我沒有將其余部分放在這里，而是只是復制了該段並在兩者之間切換。 如果拆分發生在鏈接內部（例如，如果將minimize_character_count設置為50），則僅顯示鏈接的一部分，但仍然可以使用。

$(document).ready(function () {
    var minimized_elements = $('p.description');
    var maxchars = 99;

    minimized_elements.each(function () {
      var $this = $(this);
      $this.hide();
      var children = $this.contents();
      var $shortDesc = $('<div />');
      var len = children.length;
      var count = 0;
      var i = 0;
      while (i < len) {
        var $elem = $(children[i]).clone();
        var text = $elem.text();
        var l = text.length;
        if (count + l > maxchars) {
          var newText = text.slice(0, maxchars - count);
          if ($elem.get(0).nodeType === 3) {
            $elem = document.createTextNode(newText);
          } else {
            $elem.text(newText);
          }
          $shortDesc.append($elem);
          break;
        }
        count += l;
        $shortDesc.append($elem);
        i++;
      }
      $shortDesc.append($('<span>... </span>'));

      $shortDesc.append($('<a href="#" class="more">More</a>').on('click', function(){
        $this.show();
        $shortDesc.hide();
      }));
      $this.append($('<a href="#" class="less">Less</a>').on('click', function() {
        $this.hide();
        $shortDesc.show();
      }));

      $this.after($shortDesc);
    });
});

這是演示： https : //codepen.io/anon/pen/eEyvpY?editors=1011

Answer 2

我想我已經成功實現了您在這里想要做的事情： https : //codepen.io/hydrospell/pen/EvoZbB

我采取的步驟是：

1. 在原始字符串中記錄所有<a>事件及其文本，URL和索引，並將它們收集在數組中
2. 截斷字符串而不考慮HTML（ .text() ）
3. 遍歷鏈接數組，在收集的索引的幫助下用鏈接替換每個鏈接的文本。 需要考慮是否也需要截斷最后一個鏈接。

我希望這有幫助！

這是我的第一個stackoverflow答案，所以請原諒任何格式/鏈接禮節！