function getAllNextSiblings(el, subElement, selectorFilter) {
let collection = [];
let target = el.nextElementSibling;
while (target) {
if (target.matches(subElement)) break;
if (selectorFilter && !target.matches(selectorFilter)) {
target = target.nextElementSibling;
continue;
}
collection.push(target.textContent.trim());
target = target.nextElementSibling;
}
return collection;
}
// собираем заголовки и параграфы в массив объектов
// разбивая полученные данные на группы
[...document.querySelectorAll("h1")].map(target => {
return {
heading: target.textContent,
paragraphs: getAllNextSiblings(target, "h1", "p")
};
});
В итоге имея например такую HTML - разметку:
<div class="container">
<h1>Глава 1</h1>
<p>Текстовой блок - 1</p>
<p>Текстовой блок - 2</p>
<p>Текстовой блок - 3</p>
<p>Текстовой блок - 4</p>
<h1>Глава 2</h1>
<p>Текстовой блок - 1</p>
<p>Текстовой блок - 2</p>
<p>Текстовой блок - 3</p>
</div>
Получим такой результат:
[
{
"heading": "Глава 1",
"paragraphs": [
"Текстовой блок - 1",
"Текстовой блок - 2",
"Текстовой блок - 3",
"Текстовой блок - 4"
]
},
{
"heading": "Глава 2",
"paragraphs": [
"Текстовой блок - 1",
"Текстовой блок - 2",
"Текстовой блок - 3"
]
}
]
