javascript - 试图缩短可能包含链接的文本正文

Question

我正在尝试找出一种方法来缩短可能包含链接的文本正文。

<div class="bio">
    Banjo my soundcloud is <a href="http://soundcloud.com/username">http://soundcloud.com/username</a>
    Echo Park kale chips blog, cred pitchfork keffiyeh mixtape tumblr photo booth artisan helvetica
    meggings fashion axe roof party. Aesthetic biodiesel direct trade butcher, iPhone occupy before
    they sold out trust fund mumblecore cornhole food truck DIY narwhal freegan. Salvia try-hard
    freegan, Brooklyn Marfa craft beer fanny pack dreamcatcher High Life irony sriracha. Mumblecore
    Terry Richardson ethnic, pop-up tattooed sartorial 3 wolf moon banjo biodiesel church-key semiotics
    polaroid Etsy Schlitz hashtag. Wes Anderson gluten-free lomo brunch, raw denim plaid Schlitz salvia. 
</div>

我最初尝试通过 chop 字符数来缩短文本正文，之后我会插入一个“更多”链接，将其余文本放在一个范围内，然后隐藏该范围直到“更多”链接被点击。但是，如果用户决定将链接放在错误的位置，插入“更多”链接会破坏用户放置的 anchor 标签。

这是我为这个问题找到的解决方案，不起作用:http://www.bookofzeus.com/articles/dynamically-shortened-text-using-jquery/

缩短可能包含 anchor 标记的文本正文的好方法是什么？

Answer 1

你是对的，那个 jquery 演示代码没有工作，但是这个演示可以。我不得不解决一些问题，但这里有一个你可以达到顶峰的 fiddle 。我也用了你的文本信息。

http://jsfiddle.net/Fyzxn/1/

$(document).ready(function() {
    var orgContent = $('.bio').html();
    var txtContent = $('.bio').text().substr(0, 50) + '... <a id="morelink">more</a>';
    $('.bio').html(txtContent);
    $("body").on("click", '#morelink', function(){
        $('.bio').html(orgContent);
        $('<a id="lesslink"> less</a>').appendTo('.bio');
    });
    $("body").on("click", '#lesslink', function(){
        $('.bio').html(txtContent);
    });
});