在JavaScript中截斷文本，不包含html元素

Question

我正在使用以下函數來截斷在其旁邊有一個"read more"按鈕的文本。

truncateText: function (string, targetCharacterLength) { 
    var length = string.length; 
    if (length < targetCharacterLength) { 
     return (string) 
    } else { 
     var shortenedString = string.slice(0, targetCharacterLength); 
     shortenedString = shortenedString.slice(0,shortenedString.lastIndexOf(' ')) + '... '; 
     return shortenedString 
    } 
} 

所以我的問題是與<a>標籤內的文字。如果它剛好在"read more"按鈕之前開始，則該按鈕的功能會中斷。

這是我看到的時候我在哪裏的<a>標籤開始只是"..."

< a... < a="" href="#" class="more" > Read More < /a...> 

之前有沒有人對我怎樣才能解決這一問題的思路文本檢查元素？我無法使用插件。

感謝

Answer 1

你必須找到的</a>在輸入字符串錨塊的最後一個索引。您可以使用.lastIndexOf() JavaScript Api來完成此操作。

試試FIDDLE，這裏我給出了一個帶有錨標籤的文本。該代碼發現標記主體</a>的結束。

這是一個粗略的例子，所以我認爲有一個需要使用除/a>以外的字符串的評論。

我已經更新了功能如下

function truncateText(string, targetCharacterLength) { 
    var length = string.length; 
    if (length < targetCharacterLength) { 
     return (string) 
    } else { 
     var shortenedString = string.slice(0, targetCharacterLength); 
     var tempshortenedString = shortenedString.slice(0, shortenedString.lastIndexOf(' ')); 

     var lastMarkupBegin = -1; 
     var lastMarkupEnds = -1; 
     try { 
     lastMarkupBegin = tempshortenedString.lastIndexOf("<a"); 
     lastMarkupEnds = tempshortenedString.lastIndexOf("/a>"); 
     } catch (err) {} 
     //alert(lastMarkupEnds); 
     if (lastMarkupBegin != -1) { // has an opening anchor tag 
     if (lastMarkupEnds == -1) { // not having an closing tag 
      tempshortenedString = tempshortenedString.slice(0, lastMarkupBegin); 
      //alert(tempshortenedString); 
      return tempshortenedString + '... '; 
     } 
     } 
     return shortenedString + '... ' 
    } 

希望它爲你工作