Использование javascript substring () для создания ссылки «читать дальше»

Question

Я занимаюсь разработкой классической ASP-страницы, которая извлекает некоторый контент из базы данных и создает ссылку Подробнее после первых 100 символов следующим образом;

<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 символов. Желательно, чтобы я продолжал писать текст до первого периода или пробела, например. Возможно ли это сделать?

Спасибо.

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

РЕДАКТИРОВАТЬ: немного сократил. РЕДАКТИРОВАТЬ : исправлена ​​ошибка РЕДАКТИРОВАТЬ : улучшение качества жизни

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} будет ожидать пробел или период до 20 символов, прежде чем сдаться и разбить ровно на 100 символов. Это мешает очень длинному слову вырваться из ограничения длины. {20,} в конце останавливает сопоставление, когда оно скрывает только бессмысленно небольшое количество контента.

Что касается кода замены, не делает это:

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

Это вставка простого текста в контекст HTML без какого-либо экранирования. Если visibleText или textToHide содержит какие-либо символы < или &, вы будете их искажать, что может вызвать проблемы безопасности XSS в процессе.

Вместо этого создайте text() для div и span отдельно, поскольку именно так вы и читаете текст.

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