使用更多链接截断字符，单击该链接时使用jQuery表示段落标记

Please see fiddle.

请看小提琴。

You will notice one div tag with two paragraph tags in it. I'd like the read more to work as it is currently but when you click the read more link it shows the text with the html. Currently it seems to strip the <p> tags but I need them to stay.

你会注意到一个带有两个段落标记的div标签。我希望阅读更多的工作,因为它是当前,但当你点击阅读更多链接,它显示文本与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.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>

1 个解决方案

#1

Not sure if you meant like this: Fiddle

不确定你的意思是这样的:小提琴

Just adjusted to keep the paragraph-tags with an additional function to unescape the html and fetching the html instead of the text.

只需调整以保持段落标签的附加功能,以取消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, "'");
}

#1