閱讀全文閱讀全文jQuery插件與HTML失敗

我使用此代碼爲了僅顯示文本的第一個500個字符（並且僅在完整的單詞之後切出），但是顯然在它發現某些HTML代碼時失敗「500」門檻。閱讀全文閱讀全文jQuery插件與HTML失敗

在這種情況下，它只是添加「...」，然後繼續文本（並顯示「See More」鏈接）。

如：

Lorem <strong>impsum dolor</strong> sit amet. Etcétera.

比方說，這應該削減「impsum」和「悲」之間的文本。其結果是：

Lorem <strong>impsum...<span class="hidden" style="display:none;">dolor</span></strong> sit amet. Etcétera. <a href="#">See More</a>

它應該是：

Lorem <strong>impsum... <span class="hidden" style="display:none;">dolor</strong> sit amet. Etcétera</span><a href="#">See More</a>

或...

Lorem <strong>impsum dolor</strong>... <span class="hidden" style="display:none;">sit amet. Etcétera</span<a href="#">See More</a>

任何方式將是確定的，我只是想削減後的文本。有沒有什麼辦法解決這一問題？

代碼：

(function ($) { 
$.fn.readmore = function (settings) { 

$('.home_excerpt').removeClass('home_excerpt'); 

var opts = $.extend({}, $.fn.readmore.defaults, settings); 

this.each(function() { 
    $(this).data("opts", opts); 
    if ($(this).html().length > opts.substr_len) { 
    abridge($(this)); 
    linkage($(this)); 
    } 
}); 

function linkage(elem) { 
    elem.append(elem.data("opts").more_link); 
    $(".text_seemore").click(function() { 
    $(this).hide(); 
    $(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").show(); 
    return false; 
    }); 
} 

function abridge(elem) { 
    var opts = elem.data("opts"); 
    var txt = elem.html(); 
    var len = opts.substr_len; 
    var dots = "<span>" + opts.ellipses + "</span>"; 
    var charAtLen = txt.substr(len, 1); 
    while (len < txt.length && !/\s/.test(charAtLen)) { 
     len++; 
     charAtLen = txt.substr(len, 1); 
    } 
    var shown = txt.substring(0, len) + dots; 
    var hidden = '<span class="hidden" style="display:none;">' + txt.substring(len, txt.length) + '</span>'; 
    elem.html(shown + hidden); 
} 

return this; 
}; 

    $.fn.readmore.defaults = { 
substr_len: 500, 
ellipses: '&#8230;', 
more_link: '<br /><a href="#" class="text_seemore">See&nbsp;More</a>' 
}; 

})(jQuery);

來源

2011-09-01 Santiago