Uso della sottostringa javascript() per creare un altro collegamento di lettura

Question

Sto sviluppando una pagina ASP classica che estrae parte del contenuto da un database e crea un collegamento Leggi altro dopo i primi 100 caratteri come segue;

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

Tuttavia, lo script ovviamente taglia il testo dopo 100 caratteri. Preferibilmente mi piacerebbe che continuasse a scrivere testo fino al primo periodo o spazio, per esempio. È possibile farlo?

Grazie.

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: accorciato un po '. EDIT: Corretto un bug EDIT: miglioramento QoL

Answer 2

Ecco un approccio abbastanza semplice per ottenere terminazioni a livello di parola, e le riprese per circa il tuo limite di cui caratteri.

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

ne dite:

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

Il {0,20} non vedranno l'ora di uno spazio o un periodo per un massimo di 20 caratteri prima di rinunciare e rompere esattamente a 100 caratteri. Questo impedisce a una parola estremamente lunga di uscire dalla limitazione della lunghezza. Il {20,} interrompe alla fine una corrispondenza quando si nasconderebbe solo una quantità inutilmente piccola di contenuto.

Per quanto riguarda il codice di sostituzione, non mi fare questo:

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

Questo è l'inserimento di testo semplice in un contesto di HTML senza alcuna fuga. Se visibleText o textToHide contiene uno qualsiasi < o & caratteri, lo si mancherà, causando forse un problema di sicurezza XSS nel processo.

Invece creare il set il text() del div e l'intervallo separatamente, poiché questo è il modo in cui si legge il testo in primo luogo.