Рекурсий вывод текста из тегов в DOM

Question

Дано задание

При нажатии кнопки запускается функция t3. Функция t3, с помощью рекурсивной функции r3 должна очистить текст внутри z-3 от тегов span, b, i и p. Должен остаться только текст со знаками препинания в переменной out. Функция t3 должна возвращать out.

И мое решение

function t3(elem) {
  let out = '';
  r3(elem);

  function r3(element) {
    let innerElements = element.children;
    Array.from(innerElements).forEach(item => r3(item));
    return element;

  }
  out += elem.textContent;
  return out;
}

document.querySelector('.b-3').addEventListener('click', () => {
  let z3 = document.querySelector('.z-3');
  document.querySelector('.out-3').textContent = t3(z3);

});

<div class="z-3 section">
  <p><span>Lorem ipsum </span><span>dolor </span><i>sit</i><b>amet. </b></p>
  <p><em>Consectetur </em><b>adipiscing </b><span>elit, sed do </span><b>eiusmod </b><i>tempor incididuntut labore.</i></p>
</div>
<button class="b-3">Запустить</button>
<div class="out-3"></div>

Вопрос

Задание то я решил. Но я бы хотел узнать - может есть альтернативный подход, чтобы удалить все именно в HTML коде?

Answer 1

Твой код можно сократить...

function t3(elem) {
  let innerElements = elem.children;
  if (innerElements.length) return [...innerElements].reduce((s, item) => s + t3(item), '');
  return elem.textContent;
}

document.querySelector('.b-3').addEventListener('click', () => {
  const z3 = document.querySelector('.z-3');
  console.log(z3.textContent)
  document.querySelector('.out-3').textContent = t3(z3);

});

<div class="z-3 section">
  <p><span>Lorem ipsum </span><span>dolor </span><i>sit</i><b>amet. </b></p>
  <p><em>Consectetur </em><b>adipiscing </b><span>elit, sed do </span><b>eiusmod </b><i>tempor incididuntut labore.</i></p>
</div>
<button class="b-3">Запустить</button>
<div class="out-3"></div>

Answer 2

function t3(elem) {
  let out = "";
  r3(elem);

  function r3(element) {
    if (
      element.children.length === 0 &&
      ["SPAN", "I", "B", "EM", "P"].includes(element.tagName)
    ) {
      out += element.innerHTML;
    }
    for (let child of element.children) {
      r3(child);
    }
  }

  return out;
}

document.querySelector(".b-3").addEventListener("click", () => {
  let z3 = document.querySelector(".z-3");
  document.querySelector(".out-3").textContent = t3(z3);
});

<section>
        <p><b>Task 3.</b></p>
        <p>
          При нажатии кнопки запускается функция t3. Функция t3, с помощью
          рекурсивной функции r3 должна очистить текст внутри z-3 от тегов span,
          b, i и p. Должен остаться только текст со знаками препинания в
          переменной out. Функция t3 должна возвращать out.
        </p>
        <div class="z-3 section">
          <p>
            <span>Lorem ipsum </span><span>dolor </span><i>sit</i><b>amet. </b>
          </p>
          <p>
            <em>Consectetur </em><b>adipiscing </b><span>elit, sed do </span
            ><b>eiusmod </b><i>tempor incididunt ut labore.</i>
          </p>
        </div>
        <button class="button-primary b-3">Task 3</button>
        <div class="out-3">out-3</div>
      </section>

БЛОГ НА HUSL

Рекурсий вывод текста из тегов в DOM

Дано задание

И мое решение

Вопрос

Ответы (2 шт):