Używanie javascript substring() do tworzenia linku czytaj więcej

Question

Zajmuję się klasyczną stroną ASP, która pobiera pewną zawartość z bazy danych i tworzy link Czytaj więcej po pierwszych 100 znaków w następujący sposób;

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

Jednak skrypt po prostu obcina tekst po 100 znaków. Najlepiej byłoby, gdyby nadal pisał tekst do pierwszego okresu lub miejsca, na przykład. Czy to się da zrobić?

Dziękuję.

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

EDIT: skrócić go trochę. EDIT: Naprawiono błąd EDIT: poprawę QoL

Answer 2

Tutaj jest dość proste podejście do coraz zakończeń na poziomie tekstu, a strzelanie do o swoją danego limitu znaków.

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

Answer 3

Jak o:

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} czekamy na przestrzeni lub okres do 20 znaków przed poddaniem się i zrywa w dokładnie 100 znaków. Zatrzymuje to wyjątkowo długie słowo przed przekroczeniem ograniczenia długości. {20,} na końcu zatrzymuje się, gdy dopasowuje się tylko niepotrzebnie małą ilość treści.

chodzi o kodzie zastępczej, nie to zrobić:

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

to włożenie zwykłego tekstu w kontekście HTML bez ucieczkę. Jeśli visibleText lub textToHide zawiera dowolne znaki < lub, będzie to oznaczać ich zniekształcenie, prawdopodobnie powodując problem bezpieczeństwa XSS.

Zamiast tego ustaw oddzielnie zestaw text() elementu div i span, ponieważ w ten sposób odczytujesz tekst w pierwszej kolejności.