Усечение текста в 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 + '... ' 
    } 

Надеется, что это работает для вас