使用javascript substring（）创建一个read more链接

我正在开发一个经典ASP页面，它从数据库中提取一些内容，并在前100个字符后创建一个Read more链接，如下所示;

  $(function() { var cutoff = 200; var text = $('div.contentdetail').text(); var rest = $('div.contentdetail').text().substring(cutoff); if (text.length > 200) { var period = rest.indexOf('.'); var space = rest.indexOf(' '); cutoff += Math.max(Math.min(period, space), 0); } var visibleText = $('div.contentdetail').text().substring(0, cutoff); $('div.contentdetail') .html(visibleText + ('' + rest + '')) .append('Read More…') .click(function() { $(this).find('span').toggle(); $(this).find('a:last').hide(); }); $('div.contentdetail span').hide(); });  

但是，脚本显然只是在100个字符后关闭文本。 例如，我希望它能继续写文本直到第一个句号或空格。 这可能吗？

谢谢。

Answer 1

 var cutoff = 100; var text = $('div.contentdetail').text(); var rest = text.substring(cutoff); if (text.length > cutoff) { var period = rest.indexOf('.'); var space = rest.indexOf(' '); cutoff += Math.max(Math.min(period, space), 0); } // Assign the rest again, because we recalculated the cutoff rest = text.substring(cutoff); var visibleText = $('div.contentdetail').text().substring(0, cutoff); 

编辑：缩短了一点。 编辑 ：修正了一个错误编辑 ：QoL改进

Answer 2

怎么样：

 var text= $('div.contentdetail').text(); var match= text.match( /^(.{100}([^ .]{0,20}[ .])?)(.{20,})$/ ); if (match!==null) { var visibleText = match[1]; var textToHide = match[3]; ...do replacement... } 

{0,20}将在放弃和突破100个字符之前期待最多20个字符的空格或句点。 这样可以阻止长度限制突破长度限制。 最后的{20,}停止匹配，因为它只会隐藏无意义的少量内容。

至于替换代码， 请不要这样做：

 .html(visibleText + ('' + textToHide + '')) 

这是将纯文本插入HTML上下文而不进行任何转义。 如果visibleText或textToHide包含任何<或&字符，则会对其进行修改，可能会在此过程中导致XSS安全问题。

而是分别创建div的text()和跨度，因为这是您首先阅读文本的方式。

Answer 3

这是一种相当简单的方法，可以在单词级别获得结尾，并以字符为单位拍摄约 。

 var limit = 100, text = $('div.contentdetail').text().split(/\s+/), word, letter_count = 0, trunc = '', i = 0; while (i < text.length && letter_count < limit) { word = text[i++]; trunc += word+' '; letter_count = trunc.length-1; } trunc = $.trim(trunc)+'...'; console.log(trunc);