如何解析html div文本到json

Question

我尝试解析数据从html到json结构，但我得到空字符串。这是我第一次做。

下面是可重复div块的例子:

// I try get data with this javascript in browser
var divs = document.querySelectorAll(".col-md-12"),
i = 0,
jData = [];
for (var div of divs) {
var vuzTitles = div.getElementsByTagName(".itemVuzTitle"),
obj = {};
for (var d of vuzTitles) {
obj.title = d.innerText;
var as = div.getElementsByTagName(".tooltipq");
obj.scores = a.innerText;
}
jData.push(obj);
}
jData = JSON.stringify(jData);
console.log(jData);

<div class="col-md-12 itemVuz">
<div class="vuzesfullnorm">
<div class="col-md-7">
<a href="/vuz/5309">
<img class="" src="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg" data-src="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg" data-srcset="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg"
alt="Логотип Реавиз в Москве" style="float: left; padding: 0 10px 0 0;max-width: 100px;max-height: 100px;" srcset="https://vuzopedia.ru/storage/app/uploads/public/686/aa4/ced/thumb__74_74_0_0_auto.jpeg">
<div class="itemVuzTitle">
Медицинский университет Реавиз в Москве
</div>
</a>
<h6 class="fitemVv"><a href="/vuz/5309/programs/bakispec">Программы</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/otziv">Отзывы</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/podrazdeleniya">Факультеты</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="/vuz/5309/voprosy">Задать вопрос</a></h6>
<div class="clearfix opisItemVV">
Лечебное дело, Стоматология, Фармация
<div style="margin-top: 10px;">
<div class="forcheck wantabit" aatrfch="vuz" vuz="5309" id="favv5309">Хочу поступить</div>
<div class="wantabit nuLadnoUzhe" id="compare5309" compid="5309">Сравнить</div>
<div id="optcompare5309" style="display: none;">
<a href="/region/city//services/comparevuz" id="cllicomq5309" style="color: #f2f2f2;">
<div class="wantabit nuLadnoUzhe" style="width: 170px; background: #F44336;">Посмотреть сравнение</div>
</a>
<div class="wantabit delSpItem" id="cllicom5309" compid="5309" style="width: 170px; color: #f2f2f2; background: #F44336;">Убрать из сравнения</div>
</div>
<div id="optcompareelseone5309" style="display: none;">
<a href="/region/city//services/comparevuz" style="color: #f2f2f2;">
<div class="wantabit nuLadnoUzhe" style="width: 170px; background: #F44336;">Нужно добавить еще 1 вуз</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="col-md-4 info">
<div class="forNewSpecTitleParam">
<center>Стоимость (руб/год)</center>
</div>
<center><a class="tooltipq">от 286000 <font class="price">⃏</font>  <span class="classic">минимальная стоимость по вузу (руб/год)</span></a> <span class="yearVuzInfoSpan"><a class="tooltipq fixToolT">2022<span class="classic">информация о минимальной стоимости за 2021-2022 год</span></a>
</span>
</center>
</div>
<div class="col-md-4 info">
<div class="forNewSpecTitleParam">
<center>Бюджет</center>
</div>
нет
</div>
<div class="col-md-4 info">
<div class="forNewSpecTitleParam">
<center>Платное</center>
</div>
<center><a class="tooltipq">от 125<span class="classic">минимальный суммарный проходной балл на платное по вузу</span></a> <span class="yearVuzInfoSpan"><a class="tooltipq fixToolT">2022<span class="classic">информация о платных местах за 2022 и минимальном проходном балле на платное за 2021 год, так как баллы за 2022 становятся известны только после окончания приемной кампании 2022 года</span></a>
</span>
</center>
<center><a class="tooltipq" style="font-size: 11px; color: gray;">670 мест<span class="classic">количество платных мест по вузу</span></a></center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>

但是我得到了这个:

[{},{},{},...,{},{},{}]

我怎么能得到json文本从类。itemvuztitle和。tooltipq json结构与字段名称，如标题和分数?请帮忙解答这个问题。它帮我节省了很多时间。

Answer 1

类.col-md-12太常见，可能不包含.itemVuzTitle，您需要选择类.itemVuzPremium作为父容器

var jData = []
document.querySelectorAll(".itemVuzPremium").forEach(function(el) {
var title = el.querySelector(".itemVuzTitle").textContent.trim(),
score = el.querySelector(".tooltipq").textContent.match(/d+/)[0]; // extract digit only
jData.push({title: title, score: score})
})
console.log(JSON.stringify(jData, false, 2))

输出

[
{
"title": "Университет Синергия",
"score": "80000"
},
{
"title": "Российский новый университет",
"score": "52000"
},
{
"title": "Московский технический университет связи и информатики",
"score": "64000"
}
]