使用JavaScript substring（）创建多读链接

我正在开发一个经典的ASP页面，该页面从数据库中提取一些内容，并在前100个字符后面创建Read More链接，如下所示;使用JavaScript substring（）创建多读链接

<div class="contentdetail"><%=StripHTML(rspropertyresults.Fields.Item("ContentDetails").Value)%></div> 

<script type="text/javascript"> 
    $(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 + ('<span>' + rest + '</span>')) 
      .append('<a title="Read More" style="font-weight:bold;display: block; cursor: pointer;">Read More&hellip;</a>') 
      .click(function() { 
       $(this).find('span').toggle(); 
       $(this).find('a:last').hide(); 
      }); 

     $('div.contentdetail span').hide(); 
    }); 
</script>

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

谢谢。

来源

2009-10-22 doubleplusgood

也许我把你的问题弄错了，但是你知道String.indexOf（）函数，它返回某个子串的第一次出现的索引（或者-1，如果没有找到该部分）。例如：alert（“foobar”.indexOf（“b”））将“3”作为“b”的索引。也许你可以用它来截断所需位置的字符串？ – Max 2009-10-22 10:38:13

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

编辑：缩短了一点。编辑：修正了一个错误编辑：生活质量改善

来源

2009-10-22 10:41:01 moxn

@moxn谢谢你的代码。出于某种原因，它不会缩短文本或创建“更多阅读”链接。也许我的jQuery代码现在不适用于你提供的代码？我将编辑帖子以显示我现在的代码。 – doubleplusgood 2009-10-22 10:48:51

谢谢你。有一个奇怪的小错误。我的文本第一次切断如下： “坐落在Molescroft Beverley高度重视的地区，这是一个很好的独立家庭住宅”，但当我点击阅读更多时，它似乎将最后一个字的一些字符添加到结尾如下;位于Molescroft Beverley高度重视的地区，这是一个很好的独立家庭homeome ...“ – doubleplusgood 2009-10-22 11:16:42

我修正了这个错误，当然其余的必须在'cutoff'被调整后再次用substring（）提取出来，但可能是bobince的解决方案是更好的表现... – moxn 2009-10-22 11:34:37

这是一个相当简单的方法来在单词级别越来越结局，并在人物拍摄的约您定限制。

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

来源

2009-10-22 10:50:15

如何：

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}会期待一个空间或期限最多20个字符放弃和正好是100个字符打破之前。这从停止限制长度来阻止一个非常长的词。最后的{20,}会停止正在进行的匹配，因为它只会隐藏无意义的少量内容。

至于替换码，不做到这一点：

.html(visibleText + ('<span>' + textToHide + '</span>'))

这被插入纯文本到不发生任何转义一个HTML上下文。如果visibleText或textToHide包含任何<或&字符，您将会对它们进行修改，这可能会导致此过程中出现XSS安全问题。

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

来源

2009-10-22 11:02:36 bobince

使用JavaScript substring（）创建多读链接

回答

相关问题