使用javascript substring（）创建阅读更多链接

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

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

$（函数（）{
var截止=200；
var text=$（'div.contentdetail'）.text（）；
var rest=$（'div.contentdetail'）.text（）.substring（截止）；
如果（text.length>200）{
var period=rest.indexOf（'.'）；
变量空间=rest.indexOf（“”）；
截止时间+=数学最大值（数学最小值（周期、空格），0）；
}
var visibleText=$（'div.contentdetail'）.text（）.substring（0，截断）；
$（'div.contentdetail'）
.html（visibleText+（“”+rest+“”））
.append（'Read More&hellip；'））
。单击（函数（）{
$（this.find（'span'）.toggle（）；
$（this.find（'a:last'）.hide（）；
});
$（'div.contentdetail span'）.hide（）；
});

然而，脚本显然只是在100个字符后删除文本。例如，我希望它能一直写到第一个句号或空格。这可能吗

多谢各位

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

编辑：将其缩短一点。 编辑：修复了一个错误

---

编辑：提高生活质量

这里有一个相当简单的方法，可以在单词级别获得结尾，并在给定的字符限制范围内进行拍摄

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

var限制=100，
text=$（'div.contentdetail'）.text（）.split（/\s+/），
单词
字母计数=0，
trunc=“”，
i=0；
while（i

那么：

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

包含任何

，可能我的问题搞错了，但您知道String.indexOf（）函数，该函数返回某个子字符串第一次出现的索引（如果找不到该部分，则返回-1）。示例：警报（“foobar”）.indexOf（“b”）警报“3”作为“b”的索引。也许你可以用它在想要的位置截断字符串？@moxn谢谢你的代码。出于某种原因，它没有缩短文本或创建阅读更多链接。也许我的jQuery代码现在无法使用您提供的代码？我会编辑帖子来显示我现在的代码。谢谢你。有一只奇怪的小虫子。我的正文首先截取如下：；“坐落在Molesscroft Beverley备受推崇的地区，这是一个展示得很好的独立家庭住宅”，但当我点击read more时，它似乎在结尾添加了一些字符，如下所示：；位于Molesscroft Beverley备受推崇的区域，这是一个表现良好的分离家族homome…”我修复了这个错误。当然，在
截止值调整后，必须使用substring（）再次提取其余部分。但可能bobince的解决方案在性能上更好。。。
.html(visibleText + ('<span>' + textToHide + '</span>'))