如何将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>

但是我明白了：

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

我如何从类。Itemvuztitle和.tooltipq到JSON结构的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"
  }
]