使用JavaScript substring（）創建多讀鏈接

我正在開發一個經典的ASP頁面，該頁面從數據庫中提取一些內容，並在前100個字符後面創建Read More鏈接，如下所示;使用JavaScript substring（）創建多讀鏈接

<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個字符後關閉文本。例如，我希望它能夠繼續寫文本直到第一個時間段或空間。這可能嗎？

謝謝。

來源

2009-10-22 doubleplusgood

也許我把你的問題弄錯了，但是你知道String.indexOf（）函數，它返回某個子串的第一次出現的索引（或者-1，如果沒有找到該部分）。例如：alert（「foobar」.indexOf（「b」））將「3」作爲「b」的索引。也許你可以用它來截斷所需位置的字符串？ – Max 2009-10-22 10:38:13

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

編輯：縮短了一點。編輯：修正了一個錯誤編輯：生活質量改善

來源

2009-10-22 10:41:01 moxn

@moxn謝謝你的代碼。出於某種原因，它不會縮短文本或創建「更多閱讀」鏈接。也許我的jQuery代碼現在不適用於你提供的代碼？我將編輯帖子以顯示我現在的代碼。 – doubleplusgood 2009-10-22 10:48:51

謝謝你。有一個奇怪的小錯誤。我的文本第一次切斷如下：「坐落在Molescroft Beverley高度重視的地區，這是一個很好的獨立家庭住宅」，但當我點擊閱讀更多時，它似乎將最後一個字的一些字符添加到結尾如下;位於Molescroft Beverley高度重視的地區，這是一個很好的獨立家庭homeome ...「 – doubleplusgood 2009-10-22 11:16:42

我修正了這個錯誤，當然其餘的必須在'cutoff'被調整後再次用substring（）提取出來，但可能是bobince的解決方案是更好的表現... – moxn 2009-10-22 11:34:37

這是一個相當簡單的方法來在單詞級別越來越結局，並在人物拍攝的約您定限制。

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

來源

2009-10-22 10:50:15

如何：

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安全問題。

而是分別創建div和span的集合text()，因爲這是您首先閱讀文本的方式。

來源

2009-10-22 11:02:36 bobince

使用JavaScript substring（）創建多讀鏈接

回答

相關問題