Задать вопрос
@Apstrew
javascript

Как пройтись по всем тэгам в HTML-файле и заполнить JSON в соответствии с набором правил?

Всем привет!

Есть локальный html-файл, который по сути есть список статей, у каждой есть заголовок, дата, тело и ссылка. (В конце вопроса - пример)

Я пользуюсь Node.js, fs, cheerio чтоб заполнить JSON-объект данными из этого html файла.

Как последовательно пройти по файлу и на ходу заполнить JSON следующего вида?
[
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  },
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  },
{    title: 'abc',    date: '10.10.10',    body: ' P tags here',    href: ''  }
]


У самого мысль - присвоить всем тегам ранги, а потом проверить, если ранг по сравнению с прошлым снизился - "создать дочерний элемент", если остался такой же - "добавить в дочерний элемент", если повысился - "создать новую запись". Но до реализации далеко, потому как, сабж - не знаю как даже последовательно пройтись по элементам в файле.

Вот пример куска файла, с двумя записями:

<h1 class="header"><a id="_Toc446404887"></a><a id="_Toc446498856"></a><a id="_Toc473706079"></a>Тест 1</h1>
<h2 class="date"><a id="_Toc446411230"></a><a id="_Toc446404888"></a><a id="_Toc446318335"></a><a id="_Toc446498857"></a><a id="_Toc473706080"></a>10.10.10</h2>
<p>P</p>
<p>tags</p>
<p>here</p>
<a class="source"><a href="test.html">test.html</a></a>
<h1 class="header"><a id="_Toc446404887"></a><a id="_Toc446498856"></a><a id="_Toc473706079"></a>Тест 1</h1>
<h2 class="date"><a id="_Toc446411230"></a><a id="_Toc446404888"></a><a id="_Toc446318335"></a><a id="_Toc446498857"></a><a id="_Toc473706080"></a>10.10.10</h2>
<p>P</p>
<p>tags</p>
<p>here</p>
<a class="source"><a href="test.html">test.html</a></a>


Ещё, как видим - много мусорных тегов. Буду признателен, если подскажете на каком этапе и как их отсеивать.

Вопрос получился объёмный, если можно отослать в какие-то крупные статьи, чтоб я дальше курил - тоже поможет.

Спасибо за уделённое время.
  • Вопрос задан
  • 176 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
@vitaliy_balahnin
Новичок в веб-разработке
С Cheerio не знаком, но я так понимаю он похож на jquery.
может на нём можно типа такого замутить
spoiler

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
</head>
<body>


<h1 class="header"><a id="_Toc446404887"></a><a id="_Toc446498856"></a><a id="_Toc473706079"></a>Тест 1</h1>
<h2 class="date"><a id="_Toc446411230"></a><a id="_Toc446404888"></a><a id="_Toc446318335"></a><a id="_Toc446498857"></a><a id="_Toc473706080"></a>10.10.10</h2>
<p>P1</p>
<p>tags1</p>
<p>here1</p>
<a class="source"><a href="test1.html">test1.html</a></a>
<h1 class="header"><a id="_Toc446404887"></a><a id="_Toc446498856"></a><a id="_Toc473706079"></a>Тест 2</h1>
<h2 class="date"><a id="_Toc446411230"></a><a id="_Toc446404888"></a><a id="_Toc446318335"></a><a id="_Toc446498857"></a><a id="_Toc473706080"></a>11.11.11</h2>
<p>P2</p>
<p>tags2</p>
<p>here2</p>
<a class="source"><a href="test2.html">test2.html</a></a>

<script>
 'use strict';
 var article_selector = $('.header');
 var arr = [];
 var count = 0;
 for (var item of article_selector) {

   var next_selector = $(item).next();
   var row = {};
        row.title = $(item).text();
		if (next_selector.attr('class') == 'date') {
		   row.date = next_selector.text();
		}
		
		
		  
		  
		
		var href = '';
	var loop_selector = next_selector.next();	
	var i = 0;
	row.body = '';
	while (i != 1) {
	
        if (loop_selector.attr('class') == undefined) {
		
		  row.body += loop_selector.text()+' ';
		  loop_selector = loop_selector.next();
		} else {
		  if (loop_selector.attr('class') == 'source') {
		    var elem = loop_selector;
			href = elem[0]['nextSibling']['href'];
		
		  }
		i = 1;
		  break;
		}
		
		
     }
		
	 row.href = href;	
	
		
	arr.push(row);	
	count++;
 }
 console.log(arr);
</script>

</body>
</html>

Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать анимацию 3д в которой идет монтаж двери
22 нояб. 2024, в 09:18
10000 руб./за проект
Обработать фото в стиле ASCII
22 нояб. 2024, в 08:04
1 руб./за проект
Сверстать десктоп версию сайта в tailwind
22 нояб. 2024, в 06:06
1500 руб./в час
Ещё заказы