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, "'"); 
}