截斷帶有閱讀更多鏈接的字符，點擊時使用jQuery尊重段落標籤

Question

請參閱fiddle。

你會注意到一個div標籤中有兩個段落標籤。我希望閱讀更多的工作，因爲它是目前，但當你點擊閱讀更多鏈接它顯示與HTML文本。目前它似乎剝離<p>標籤，但我需要他們留下來。

var shortenP = function(options) { 

     options = $.extend({ 
     length: 160, 
     ellipsis: ' [...]', 
     moreClass: 'more-link', 
     moreText: 'Read More' 
    }, options); 

    $('div').each(function() { 

     var $p = $(this); 
     var text = $p.text(); 
     var shortString = text.substring(0, options.length) + options.ellipsis; 
     $p.data('fulltext', text); 
     $p.text(shortString); 
     $('<a/>').attr({ 
      href: '#', 
      'class': options.moreClass 
     }).text(options.moreText). 
     insertAfter($p); 
     $p.next().click(function(e) { 

     $p.text($p.data('fulltext')); 
     e.preventDefault(); 
     }); 

    }); 

    }; 

    shortenP(); 

    <div> 
     <p>Rhoncus dolor porta pellentesque nec arcu! Tincidunt porttitor! Proin magnis elit diam  penatibus lundium, integer et, mauris a! Augue porta. Nec integer placerat integer? Ut aliquet montes lorem, duis nascetur! Facilisis risus magnis in aliquam non, eros elementum augue pid! Etiam adipiscing lacus parturient aliquam ultricies tortor lectus sagittis turpis diam, pulvinar. Rhoncus vel!</p> 

     <p>Scelerisque porttitor ac tristique cum! Magnis porta rhoncus cum augue amet, in nec, magna! Odio? Integer in. Nec pulvinar, ac cursus est, enim? Placerat lundium! Egestas vel mus tempor, ultrices auctor, magnis mauris? Adipiscing habitasse est enim massa et! Hac in odio scelerisque. Duis turpis nisi, mauris, natoque, tortor, dis?</p> 
    </div> 

Answer 1

不知道你的意思是這樣的：Fiddle

只是調整，以保持段落標記與附加功能反轉義HTML和獲取的HTML而不是文本。

var shortenP = function(options) { 

options = $.extend({ 
    length: 160, 
    ellipsis: ' [...]', 
    moreClass: 'more-link', 
    moreText: 'Read More' 
}, options); 

$('div').each(function() { 

    var $p = $(this); 
    var text = $p.html(); 
    var shortString = text.substring(0, options.length) + options.ellipsis; 
    $p.data('fulltext', text); 
    $p.html(unescapeHtml(shortString)); 
    $('<a/>').attr({ 
     href: '#', 
     'class': options.moreClass 
    }).html(options.moreText). 
    insertAfter($p); 
    $p.next().click(function(e) { 

     $p.html($p.data('fulltext')); 
     e.preventDefault(); 
    }); 

}); 

}; 

shortenP(); 
function unescapeHtml(text) { 
return text.replace(/&amp;/g, '&') 
    .replace(/&lt;/g, '<') 
    .replace(/&gt;/g, '>') 
    .replace(/&quot;/g, '"') 
    .replace(/&#039;/g, "'"); 
}