jQuery вырезать текст без нарезки слов

Question

Я знаю, этот вопрос задавался несколько раз, поэтому извиняюсь за его повторение, но я не могу найти решение своего вопроса в этих ответах.

У меня есть выделенный текст, который Я хочу вырезать после такого количества слов, а затем, щелкнув, добавить остальные слова обратно - как в стиле аккордеона.

Я разрезал текст на две части и снова сложил их вместе, используя jQuery , но это разрезает слова пополам. Я бы хотел его обрезать после слов. Я не уверен, что то, как я это сделал, является лучшим подходом, поэтому, если у кого-то есть какие-то другие идеи или они знают, как обрезать после слова, а не посередине, это было бы очень признательно.

$(".about__profiles--team .text").text(function() {
  var introText = $(this).text().substring(0, 150);
  var panelText = $(this).text().substring(150);

  $(this).html('<span class="accordion-button">' + introText + '</span><span class="panel">' + panelText + '</span>');
});

$('.accordion-button').click(function() {
  $(this).parent('#accordion').toggleClass('open-accordion');
});

.text {
  border-bottom: 1px solid black;
  padding-bottom: 30px;
  margin-bottom: 0;
  position: relative;
}

.accordion-button {
  transition: ease 0.4s;
  cursor: pointer;
  outline-style: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.accordion-button:before {
  content: '+';
  display: block;
  color: black;
  height: 10px;
  width: 10px;
  position: absolute;
  bottom: 10px;
  right: 0;
  transform: rotate(90deg);
  transition: ease 0.4s;
}

.panel {
    display: none;
    transition: ease 0.4s;
}

.open-accordion > .accordion-button:before {
  transform: rotate(-90deg) !important;
}

.open-accordion > .panel {
  display: inline !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="about__profiles--team">
  <h3 class="job-title">Title</h3>
  <h2 class="name">LOREM IPSUM</h2>
  <div class="text" id="accordion">Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris tri accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ul, consectetur adipiscing Mauris tristique eu orci ac sodales. Vestibulum id accumsan, pulvinar purus a, facilisis ligula. Fusce mi a velit ultrices, id porta arcu viverra. Nunc pia enim, id egestas dolor bibendum nec.</div>
</div>

Спасибо

Answer 1

Чтобы просто разрезать не посередине слова, ищите следующий пробел. Так что самый простой способ заменить

var introText = $(this).text().substring(0, 150);
var panelText = $(this).text().substring(150)

на

var index = $(this).text().indexOf(' ', 150);
var introText = $(this).text();
var panelText = '';
if(index !== -1)
{
    var introText = $(this).text().substring(0, index);
    var panelText = $(this).text().substring(index+1);
}

Имейте в виду, что это очень простой c. Вы также можете разделить на ".", ",", "-" et c. И я не уверен, что 150 - это вообще правильный выбор