Используйте кукловода, чтобы разбить часть текста на массив объектов

Question

Я использую кукловод, чтобы удалить <section> текста. Раздел содержит заголовки, которые вы можете идентифицировать по жирному тегу <b>, а текст под жирным тегом является содержимым заголовка.

Вот так выглядит раздел HTML:

Пример

<section class="description">
  <div>
    <b>Heading 1 <br /></b>
    This is content related to heading 1.
    <br />
    <b>Heading 2 <br /></b>
    This is content related to heading 2.
    <br />
  </div>
</section>

Как разбить это на массив объектов, которыеможет выглядеть так:

const section = [
  {
    heading: "Heading text",
    content: "This is the text that relates to the heading."
  }
];

Сейчас единственное, что я могу сделать, - это взять внутренний текст, используя.

await page.evaluate(
  () => document.querySelector("section.job-description").textContent
);

Answer 1

Вы можете использовать Document.querySelectorAll(), чтобы найти все <b> теги в .description, затем используйте Node.nextSibling, чтобы выбрать соседний текстовый узел.

Это во многом зависит от отсутствия других элементов между <b>...</b> и текстом.

Пример ...

const section = Array.from(document.querySelectorAll('.description b'), b => ({
  heading: b.textContent.trim(),
  content: b.nextSibling.textContent.trim()
}))

console.info(section)

<section class="description">
  <div>
    <b>Heading 1 <br /></b>
    This is content related to heading 1.
    <br />
    <b>Heading 2 <br /></b>
    This is content related to heading 2.
    <br />
  </div>
</section>