的JavaScript/jQuery的 - 請切片段落文本內容

我有一個包含鏈接的描述錨標籤。如果描述包含超過100個字符，則將其分片爲僅包含從第一個字符到第100個字符的文本。我還會顯示一個省略號和一個更多鏈接，它會在點擊時顯示剩餘的內容。

的問題

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

我的想法/期望的結果

我使用jQuery的的.text（）方法來獲取描述的精確長度，以保持整個切片的一致性。如果我想的正確，.text（）只是抓住原始內容，這就是爲什麼錨標籤被剝離。但是，如果我使用.html（）方法，則難以保持文本在（我需要）處切片的位置的一致性，因爲它會計算這些html標記及其屬性的字符。這是我堅持的地方。

最後，我想要一個方法來精確描述正確的描述，同時保持鏈接。我也會在每個頁面上有多個描述，所以我想要一種方法來展開和最小化單擊每個單獨的描述。

玩弄於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>

謝謝！

來源

2017-08-17 Andrew Garrison

您是否考慮過使用CSS隱藏比給定像素（或其他單位）寬度更寬/更高的任何東西？這樣你就不需要修改元素的實際內容了。 – nnnnnn

是的，我可能應該澄清，我截斷文本的原因是因爲我不希望'預覽'通過300px寬的div內的兩行，我將使用它。因此，我還需要將「更多」鏈接放在第二行，因爲我沒有空間放在下面。如果我這樣做，我肯定會使用基於CSS的方法。謝謝你的迴應和想法！ –

使用.children（'a'）來抓取鏈接，然後在它們上面繪製鏈接數組和另一個錨文本。我想你會替換鏈接數組中的文本 –

您可以使用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

來源

2017-08-17 04:34:14 solarc

我喜歡這種方法，但是，它並沒有正確切分字符串。例如，如果您將minimize_character_count設置爲99，它將顯示174個字符。最終，我使用了Siah的技術來正確切分並保留鏈接，並對我如何切換更多和更少鏈接做了一些修改。 –

哦，你是對的，好像jQuery不能更新textNodes中的文本。無論如何，我會更新答案。編輯：完成 – solarc

更新後我實際上更傾向於回答您的答案 - 感謝您抽出時間修改該問題......我現在在處理同一頁面上的多個說明以及單獨打開和關閉每個獨特的問題時遇到問題。任何想法如何我可以處理這個？ –

我想我已經成功地實現你希望在這裏做什麼：https://codepen.io/hydrospell/pen/EvoZbB

我是採取的步驟：

記錄所有的<a>出現與他們的文字，網址和索引在原始字符串中並將它們收集在一個數組中
截斷字符串，而不考慮HTML（.text()）
瀏覽鏈接數組，在所收集的索引的幫助下替換每個鏈接文本的鏈接。如果最後一個鏈接也需要被截斷，則需要考慮。

我希望這有助於！

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

來源

2017-08-17 04:35:43 Siah

的JavaScript/jQuery的 - 請切片段落文本內容

回答

相關問題