Распарсить HTML код в JSON

@prometey · Регистрация: 24.11.2019

Студворк — интернет-сервис помощи студентам

Все доброго времени суток.

Имеется такой кусок HTML:

HTML5
1
2
3
4
5
6
7
8
9
<h4>Группа 1</h4>
    <span>Этап 1</span>Введение <a href="/g1/etap1.html">Подробности</a><br />
<h4>Группа 2</h4>
    <span>Этап 1</span>Введение <a href="/g2/etap1.html">Подробности</a><br />
    <span>Этап 2<span class="info-st">(рекомендуется)</span>Подготовка <a href="/g2/etap2.html">Подробности</a><br />
    <span>Этап 3</span>Начало работы <a href="/g2/etap3.html">Подробности</a><br />
<h4>Группа 3</h4>
    <span>Этап 1</span>Подготовка <a href="/g3/etap1.html">Подробности</a><br />
    <span>Этап 2</span>Начало работы <a href="/g3/etap2.html">Подробности</a><br />

Подскажите как мне его можно распарсить в JSON используя модуль cheerio ну или любой подходящий аналог.
Должен получится такой объект:

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
{
    "groups": [
        {
            "name": "Группа 1",
            "etaps": [
                {
                    "name": "Этап 1",
                    "caption": "Введение",
                    "url": "/g1/etap1.html",
                    "required": false
                }
            ]
        },
        {
            "name": "Группа 2",
            "etaps": [
                {
                    "name": "Этап 1",
                    "caption": "Введение",
                    "url": "/g2/etap1.html",
                    "required": false
                },
                {
                    "name": "Этап 2",
                    "caption": "Подготовка",
                    "url": "/g2/etap2.html",
                    "required": true
                },
                {
                    "name": "Этап 3",
                    "caption": "Начало работы",
                    "url": "/g2/etap3.html",
                    "required": false
                }
            ]
        },
        {
            "name": "Группа 3",
            "etaps": [
                {
                    "name": "Этап 1",
                    "caption": "Подготовка",
                    "url": "/g3/etap1.html",
                    "required": false
                },
                {
                    "name": "Этап 2",
                    "caption": "Начало работы",
                    "url": "/g3/etap2.html",
                    "required": false
                }
            ]
        }
    ]
}

Можно ли это сделать и если можно то подскажите как.
Вопрос наверно больше из разряда "Если кому нечего делать и любит решать интересные задачки", но для меня это сложновато пока...

@MrOnlineCoder · 21.08.2020, 22:09

prometey, на входе всегда будет такой HTML?

@Iverycool · 21.08.2020, 22:25

prometey, html у вас не валидный(нету закрывающего тега у второго span'а во второй группе), тем более "группы" определены у вас только визуально, к тому же вы не указал среду выполнения, поэтому мой вариант будет построен на регулярках:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function parseHtmlToJson(htmlStr) {
  const groupsReg = /<h4>([^<]+)<\/h4>((?:\n\s*<span>.+)+)/g;
  const contentReg = /<span>([^<]+)(<span class="info-st">\(рекомендуется\))?<\/span>([^<]+?)\s*<a href="([^"]+)">/g;
 
  return JSON.stringify({
    groups: [...htmlStr.matchAll(groupsReg)].map(([, groupName, content]) => ({
      name: groupName,
      etaps: [...content.matchAll(contentReg)].map(([, name, requiredStr, caption, url]) => ({
        name, caption, required: !!requiredStr, url
      }))
    }))
  });
}
 
console.log(parseHtmlToJson(`<h4>Группа 1</h4>
    <span>Этап 1</span>Введение <a href="/g1/etap1.html">Подробности</a><br />
<h4>Группа 2</h4>
    <span>Этап 1</span>Введение <a href="/g2/etap1.html">Подробности</a><br />
    <span>Этап 2<span class="info-st">(рекомендуется)</span>Подготовка <a href="/g2/etap2.html">Подробности</a><br />
    <span>Этап 3</span>Начало работы <a href="/g2/etap3.html">Подробности</a><br />
<h4>Группа 3</h4>
    <span>Этап 1</span>Подготовка <a href="/g3/etap1.html">Подробности</a><br />
    <span>Этап 2</span>Начало работы <a href="/g3/etap2.html">Подробности</a><br />`));

@prometey · 21.08.2020, 23:59 **[ТС]**

Сообщение от MrOnlineCoder

на входе всегда будет такой HTML?

Да. Единственное только может быть, а может и не быть его. А структура такая всегда

Сообщение от Iverycool

html у вас не валидный(нету закрывающего тега у второго span'а во второй группе)

Да, мой косяк. Там должен быть закрывающийся тэг.

Сообщение от Iverycool

тем более "группы" определены у вас только визуально

Это как понять? Он внутри тега <h4>. Код html не мой, он приходит в таком виде.

Сообщение от Iverycool

к тому же вы не указал среду выполнения

Может я что-то не понял, но среда node js с использованием модуля cheerio, писал об этом в первом посте. Но можно и как вы сделали регулярками.

Сообщение от Iverycool

поэтому мой вариант будет построен на регулярках

Для приведенного в первом посте работает. Спасибо! Но не могли бы вы чуть изменить код ибо регулярки мое слабое место?

Во-первых, если есть то там будет второй закрывающийся тег span. Я его не указал в первом посте (извиняюсь).
Во-вторых, class="info-st" имя класса может меняться, т.е там может быть не info-st, другой класс.
И в-третьих, слово (рекомендуется), как оказалось тоже может быть разным. Например там может быть Не обязательно и другое.

со вторым закрытым тегом span выглядит так:

HTML5
1
<span>Этап 2<span class="info-st">(рекомендуется)</span></span>Подготовка <a href="/g2/etap2.html">Подробности</a><br />

Если не сложно. Буду весьма благодарен. Спасибо.

@Iverycool · 22.08.2020, 00:08

prometey, если я правильно понял, то если между "Этап n" и есть что-либо, то это означает, что этап рекомендованный.
Измените contentReg на:

JavaScript
1
/<span>([^<]+)(<span[^>]+>[^<]+(?:<\/span>)?)?<\/span>([^<]+?)\s*<a href="([^"]+)">/g

@prometey · 24.08.2020, 10:44 **[ТС]**

Спасибо что уделили время и помогли.
У меня все таки получилось сделать то что я хотел с помощью needle и cheerio

@j2FunOnly · 24.08.2020, 12:20

prometey, поделитесь?

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	21.08.2020, 22:09
	prometey, на входе всегда будет такой HTML? 0

@prometey 0 / 0 / 0 Регистрация: 24.11.2019 Сообщений: 31
	24.08.2020, 10:44 [ТС]
	Спасибо что уделили время и помогли. У меня все таки получилось сделать то что я хотел с помощью needle и cheerio 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	24.08.2020, 12:20
	prometey, поделитесь? 0

Распарсить HTML код в JSON

Решение