substr_len 与 HTML，显示前 X 个字符和“查看更多”链接（jquery.readmore 插件）

Question

我正在使用一个插件来仅显示文本的前 500 个字符...但它不适用于某些 HTML，我无法重现它，但我认为它可能必须使用 ; 标签，或者

或者可能是

/

它只是显示整个文本和“查看更多”链接...

有什么想法吗？

这是代码

(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);

Answer 1

如果我正确地阅读了您的代码，那么在您的 abridge() 函数中，您似乎试图避免将单词切成两半。问题是，如果所需长度之后没有任何空格，您将只返回整个内容，但您不会事后检查是否是这种情况。这意味着您将返回全文并添加更多链接。

当您处理 HTML 时，如果您有单字行、具有单字单元格的表格等，或者使用   作为空格，则上述情况是常见情况。

更大的问题是您将 HTML 剪切为字符串，这几乎肯定会导致标记损坏。您可以轻松地将标签切成两半，剥离块元素的结束标签，等等。看看是否可以使用 elem.text() 将其处理为纯字符串，或者如果您想保留格式，请查看是否可以提取第一段或类似的内容。

您当然可以实现一些检查和关闭剥离标签的高级方法，但这可能不值得麻烦。我会检查是否有一个插件已经可以满足您的需要。