@lilroy

Как разделить данные в html формате?

Как можно разделить данные? Нужно разделение информации на блоки как элемент в массив. То есть, от заголовка до заголовка h1 c последующими его параграфами это один элемент массива. Если заголовка нет, то это тоже является концом блока.

Скриншот

632b1232b0527444633049.png
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
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"
      ]
   }
]
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 мая 2024, в 02:11
5000 руб./за проект
01 мая 2024, в 00:29
2000 руб./за проект
01 мая 2024, в 00:20
15000 руб./за проект