Question

我正在使用此代码，以便仅显示文本的前500个字符（并且仅在完整单词之后剪切），但是当它在“500”阈值中找到某些HTML代码时，它显然会失败。

在这种情况下，它只是添加“...”然后继续文本（并显示“查看更多”链接）。

例如：

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

让我们说它应该剪切“impsum”和“dolor”之间的文字。结果是：

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

Answer 1

我刚刚发现这个jquery插件与HTML标签完美配合：

http://plugins.learningjquery.com/expander/index.html

Answer 2

要获得字符串的前500个字符，您可以这样做：

var result = myString.splice(0,500);

你可能需要对最后一个单词做一些额外的处理，看看它是否是单词的一部分，然后添加你的'...'和'read more'链接。

注意：此示例将从字符串myString中删除前500个字符并将其存储在结果中。 myString将保留字符串中的其余字符。

阅读更多jQuery插件失败的HTML

2 个答案: