Как получить все h2 и входящие в него h3?

Question

Есть такая вот разметка страницы:

<h2>1</h2>
.....
<h3>1.1</h3>
.....
<h3>1.2</h3>
.....
<h2>2</h2>
....
<h3>2.1</h3>

и тд.

Мне нужно получить массив вида:

1: 1.1, 1.2
2: 2.1
и т.д.

То есть получить нужно h2 и все h3 до нового h2

Буду благодарен за помощь!

Answer 1

Вариант с объектом на выходе:

function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let key;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      key = element.innerText;
      result[key] = [];
    } else {
      result[key].push(element.innerText);
    }
    return result;
  }, {});
}

console.log(getContent());

<h2>1</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>2</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>3</h2>
<h3>3.1</h3>
<h3>3.2</h3>

И вариант с массивом на выходе:

function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let group;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      group = [];
      result.push(group);
    } else {
      group.push(element.innerText);
    }
    return result;
  }, []);
}

console.log(getContent());

<h2>1</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>2</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>3</h2>
<h3>3.1</h3>
<h3>3.2</h3>

Мой вариант:

function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let key;
  let index = 0;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      index++;
      key = element.innerText;
      result[index] = {
        key,
        child: []
      };
    } else {
      result[index].child.push(element.innerText);
    }
    return result;
  }, {});
}

console.log(getContent());

<h2>A</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>B</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>C</h2>
<h3>3.1</h3>
<h3>3.2</h3>

БЛОГ НА HUSL

Как получить все h2 и входящие в него h3?

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