Как получить все элементы на странице и первое слово обернуть в span?

Question

[Константин]

На странице имеется несколько элементов вида <a class="doc" href="">Новый текст текст</a>.

Необходимо у каждого первое слово обернуть в span.

Я сломался на этапе получения содержимого тега:

let arr = document.querySelectorAll('.doc');
		
		for (let i = 0; i < arr.length; i++) {
		 
			console.log([i].innerHTML)
		}

Answer 1

[0xD34F]

У кого надо оборачивать слова: const className = 'doc';.

Как можно обернуть первое слово:

const wrapFirstWord = el =>
  el.innerHTML = el.innerText.replace(/\S+/, '<span>$&</span>');

// или

const wrapFirstWord = el =>
  el.innerHTML = el.innerHTML
    .split(' ')
    .map((n, i) => i ? n : `<span>${n}</span>`)
    .join(' ');

// или

function wrapFirstWord(el) {
  const i = el.textContent.indexOf(' ');
  const span = document.createElement('span');
  span.append(el.textContent.slice(0, i));
  el.replaceChildren(span, el.textContent.slice(i));
}

// или

function wrapFirstWord({ childNodes: [ text ] }) {
  const [ , first, rest ] = text.nodeValue.match(/(\S+)(.*)/);
  const span = document.createElement('span');
  span.appendChild(new Text(first));
  text.nodeValue = rest;
  text.parentNode.insertBefore(span, text);
}

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

document.querySelectorAll(`.${className}`).forEach(wrapFirstWord);

// или

for (const n of document.getElementsByClassName(className)) {
  wrapFirstWord(n);
}

Comments

[Константин]

спасибо!