Question

情景

我有一个包含链接的说明。如果描述包含超过100个字符，我将其切片以仅包含从第一个字符到第100个字符的文本。我还会显示一个省略号和一个更多链接，在点击时显示其余内容。

问题

切片时，会删除内容中的链接。

我的想法/期望的结果

我使用jQuery的.text（）方法来获取描述的确切长度，以保持整个切片的一致性。如果我正在思考，.text（）只是抓取原始内容，这就是剥离锚标签的原因。但是，如果我使用.html（）方法，那么很难保持文本切片位置的一致性（我需要），因为它会计算那些html标签的字符及其属性。这就是我坚持的地方。

最终，我想在保持链接的同时将描述切换为正好100个字符。我还将在每个页面上有多个描述，因此我想要一种方法来扩展和最小化每个单独的唯一描述。

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

＆＃13;

$(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();
    });
});

＆＃13;

<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>

＆＃13;

谢谢！

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

我采取的步骤是：

记录所有<a>次出现的文字，网址和索引在原始字符串中并以数组形式收集它们
在不考虑HTML（.text()）
浏览链接数组，在收集的索引的帮助下替换每个链接文本的链接。如果最后一个链接也需要被截断，则需要考虑。

我希望这有帮助！

这是我的第一个stackoverflow答案，所以请原谅任何格式/链接礼仪失礼！

JavaScript / jQuery - 将锚标记保留在切片的段落文本内容中

2 个答案: