截断带有阅读更多链接的字符，点击时使用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, "'"); 
}