實施顯示更多 - 顯示較少文本

我有一個面向內容的產品。有一次，我展示了一個可用實體列表及其完整摘要。現在，所說的摘要是用戶使用TinyMCE編輯器輸入的數據（即它可以包含像img，p，span，ul，li等HTML標籤）。由於摘要可以跨越幾百行，因此我希望乾淨地實現Show More-Less功能，使用javascript在默認情況下加載隱藏的摘要，僅在用戶單擊「顯示更多」時才顯示其餘。實施顯示更多 - 顯示較少文本

這將是很高興知道，你們如何擁有或將實施它。我想限制用戶輸入的標記的多樣性，並使用正則表達式將標記用span鏈接拆分爲load-more（就像Facebook一樣）。

注意：我不能根據字符/單詞的數量拆分文本，因爲它可能會違反標記。我無法通過限制高度來隱藏內容，因爲img標籤（稍後加載並且可以改變包含div的高度，並且反過來破壞您的高度計算。）

來源

2011-06-21 simplyharsh

我會用下面的函數去掉不需要的html標籤。

// Strips HTML and PHP tags from a string 
// returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>' 
// example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>'); 
// returns 2: '<p>Kevin van Zonneveld</p>' 
// example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>"); 
// returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>' 
// example 4: strip_tags('1 < 5 5 > 1'); 
// returns 4: '1 < 5 5 > 1' 
function strip_tags (str, allowed_tags) 
{ 

    var key = '', allowed = false; 
    var matches = []; var allowed_array = []; 
    var allowed_tag = ''; 
    var i = 0; 
    var k = ''; 
    var html = ''; 
    var replacer = function (search, replace, str) { 
     return str.split(search).join(replace); 
    }; 
    // Build allowes tags associative array 
    if (allowed_tags) { 
     allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi); 
    } 
    str += ''; 

    // Match tags 
    matches = str.match(/(<\/?[\S][^>]*>)/gi); 
    // Go through all HTML tags 
    for (key in matches) { 
     if (isNaN(key)) { 
       // IE7 Hack 
      continue; 
     } 

     // Save HTML tag 
     html = matches[key].toString(); 
     // Is tag not in allowed list? Remove from str! 
     allowed = false; 

     // Go through all allowed tags 
     for (k in allowed_array) {   // Init 
      allowed_tag = allowed_array[k]; 
      i = -1; 

      if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');} 
      if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');} 
      if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag) ;} 

      // Determine 
      if (i == 0) {    allowed = true; 
       break; 
      } 
     } 
     if (!allowed) { 
      str = replacer(html, "", str); // Custom replace. No regexing 
     } 
    } 
    return str; 
}

如果content是編輯器內容，則用法。這將保持斯潘斯：

var my_clean_content = strip_tags(content, 'span');

來源

2011-06-21 15:07:37 Thariama

個人而言，我會這樣做jQuery並使用一個插件，如Text Constrain。

您可以download it here或查看jQuery site上的其他類似插件。

來源

2011-06-21 11:31:42 Town

http://henrik.nyh.se/2008/02/jquery-html-truncate這個傢伙非常整潔的實施。你也可以在這裏看到工作演示http://henrik.nyh.se/examples/truncator/

來源

2011-06-21 13:48:12 meson10

我見過的最好的jQuery插件實現此功能是Expander。它的優點是已經存在好幾年了，並且在寫這篇文章的時候仍然保持着積極的維護狀態，這與解決這個問題的答案中的大多數或所有其他解決方案不同。

來源

2012-06-27 16:58:37 Marcus

實施顯示更多 - 顯示較少文本

回答

相關問題