使用javascript子字符串()来创建更多链接。

I'm developing a Classic ASP page that pulls some content from a database and creates a Read more link after the first 100 characters as follows;

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

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

However, the script obviously just cuts the text off after 100 characters. Preferably I would like it to keep on writing text until the first period or space, for example. Is this possible to do?

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

Thank you.

谢谢你！

3 个解决方案

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

EDIT: shortened it a bit. EDIT: Fixed a bug EDIT: QoL improvement

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

#2

How about:

如何:

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

The {0,20} will look forward for a space or period for up to 20 characters before giving up and breaking at exactly 100 characters. This stops an extremely long word from breaking out of the length limitation. The {20,} at the end stops a match being made when it would only hide a pointlessly small amount of content.

{0,20}将查找最多20个字符的空格或时间段，然后放弃，并在100个字符前中断。这将阻止一个非常长的单词打破长度限制。{20，}末尾的{20，}停止了正在进行的匹配，因为它只隐藏了毫无意义的少量内容。

As for the replacement code, don't do this:

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

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

This is inserting plain-text into an HTML context without any escaping. If visibleText or textToHide contains any < or & characters you will be mangling them, perhaps causing a XSS security problem in the process.

这是在HTML上下文中插入纯文本，没有任何转义。如果visibleText或textToHide包含任何 <或&字符，您将对它们进行处理，可能会在处理过程中导致xss安全性问题。< p>

Instead create the set the text() of the div and the span separately, since that's the way you read the text in the first place.

相反，要分别创建div和span的文本()，因为这是您首先阅读文本的方式。

#3

Here is a fairly simple approach to getting endings at the word level, and shooting for about your given limit in characters.

这里有一个相当简单的方法来获得词尾，并拍摄关于你给定的字符限制。

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

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