Как обернуть центральные слова из html тегов в span?

Question

[xaruki]

На динамическом сайте выводятся заголовки h5 c классом heading.

<h5 class="heading">Противоположная точка зрения подразумевает, что многие известные</h5>
<h5 class="heading">Как принято считать, элементы политического процесса объявлены нарушающими</h5>

Нужно пройтись по всем этим заголовкам и 3-4 центральных слова обернуть в тег span.

Comments

[Kostya10295]

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

[xaruki]

У меня получилось сделать только "Извлечь текст из данных тегов, превратить текст в массив", но спасибо.
Отметил решение ответ ниже.

Answer 1

[0xD34F]

Где, во что и сколько слов надо обернуть:

const className = 'heading';
const wrapperTag = 'span';
const wrapCount = 3;

Оборачиваем:

document.querySelectorAll(`.${className}`).forEach(n => {
  const words = n.innerText.split(' ');
  const iMin = Math.max(0, Math.floor((words.length - wrapCount) / 2));
  const iMax = Math.min(words.length - 1, iMin + wrapCount - 1);

  words[iMin] = `<${wrapperTag}>${words[iMin]}`;
  words[iMax] = `${words[iMax]}</${wrapperTag}>`;

  n.innerHTML = words.join(' ');
});

или

for (const n of document.getElementsByClassName(className)) {
  const words = n.textContent.split(/(?= )/);
  const wrapper = document.createElement(wrapperTag);

  wrapper.textContent = words
    .splice(Math.max(0, (words.length - wrapCount) >> 1), wrapCount, wrapper)
    .join('');

  n.replaceChildren(...words);
}

Comments

[xaruki]

Вы гений!