Как обрезать строку после длинного слова?

Question

[Qurel]

На странице есть параграфы с текстом. Как обрезать текст после длинного слова, а само слово ограничить по количеству символов?
Я создала массив из строк, потом эти строки преобразовала в слова, проверила если количество символов в слове больше 19 - обрезала.
Не понимаю как обрезать слова, которые идут после длинного слова.
Вот что на данный момент получилось: Codepen

Answer 1

[0xD34F]

$('.js-cropped-word').text((i, text) => text.replace(/(?<=\S{19,}).+/, '...'));

UPD. Вынесено из комментариев:

В Сафари не работает

Это из-за lookbehind. Делайте тогда так:

document.querySelectorAll('.js-cropped-word').forEach(n => {
  n.textContent = n.textContent.replace(/(\S{19}).+/, '$1...');
});

Или вообще можно от регулярных выражений отказаться, правда, получится весьма многословно:

const max = 19;

for (const n of document.getElementsByClassName('js-cropped-word')) {
  const words = n.innerText.split(' ');
  const i = words.findIndex(n => n.length > max);
  if (i !== -1) {
    words.length = i + 1;
    words[i] = words[i].slice(0, max) + '...';
    n.innerText = words.join(' ');
  }
}

Comments

[Qurel]

Спасибо, огромное, код получился в 3 строки:

$('.js-cropped-word').each(function() {
	$(this).text($(this).text().replace(/(?<=\S{19,}).+/, '...'));
});

[0xD34F]

Можно короче - обновил ответ.

[Qurel]

0xD34F, Спасибо, мне моя запись более понятна

[Qurel]

В Сафари не работает, я читала, что это из-за replace

[0xD34F]

Дополнил ответ.

[Qurel]

0xD34F, Спасибо, помогло. Теперь работает в IE и Сафари

Answer 2

[Alex]

У вас есть массив слов. Найдите индекс длинного слома, и используйте https://developer.mozilla.org/uk/docs/Web/JavaScri... чтобы обрезать массив слов.