抓取一个 html 页面并将其变成一个 json 对象答案

【问题标题】：scraping a html page and make it into a json object抓取一个 html 页面并将其变成一个 json 对象
【发布时间】：2017-08-29 23:35:29
【问题描述】：

我正在尝试抓取一个 html 页面并将其变成一个 json 对象

这是该页面的页面

<html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href="index.html">Index</a> ] | [ <a href="config.html">Device Config</a> ]</p></div><div>Neighbors<pre>fe80::212:4b00:8b8:6ecb REACHABLE</pre></div><div>Default Route<pre>fe80::212:4b00:8b8:6ecb</pre></div><div>Routes<pre></pre></div><div>Sensors<pre>Battery Temp = 19 C
Battery Volt = 3320 mV
Air Pressure = 1031.12 hPa
Air Temp = 22.66 C
Object Temp = 12.375 C
Ambient Temp = 23.062 C
Light = 0.00 lux
HDC Humidity = 43.93 %RH
HDC Temp = 23.03 C
Acc X = 0.02 G
Acc Y = 0.02 G
Acc Z = -1.10 G
Gyro X = -2.93 deg per sec
Gyro Y = -2.74 deg per sec
Gyro Z = 5.18 deg per sec</pre></div><div>Page hits: 4<br>Uptime: 138 secs<br></div></body></html>

这是我的尝试：

var request = require('request');
var cheerio = require('cheerio');





request('http://[aaaa::212:4b00:c2a:b704]/index.html', function(error, response,html){
        if(!error && response.statusCode == 200){
          //JSON.parse(html)
          //console.log('--------------------------------------');
          var temp = {"id":html}
          var obj = JSON.parse(temp)
          console.log(JSON.stringify(obj));
        }

});

如何实现将传感器 div 放入包含传感器名称作为键和传感器数据作为属性的对象中

更新：

感谢 Rafal Wiliński 的帮助，我以某种方式设法让它工作，但最后一个关键是将 div 作为对象中的值

新代码：

var request = require('request');
var cheerio = require('cheerio');



 request('http://[aaaa::212:4b00:c2a:b704]/index.html', function(error, response,html){
        if(!error && response.statusCode == 200){

          var obj = {};
          html.split('\n').forEach((line) => {
             var key = line.split(' = ')[0];
             var value = line.split(' = ')[1];
             obj[key] = value;
          });
          console.log(JSON.stringify(obj,null,' '))


        }});

但我的输出是

{
 "Battery Temp": "22 C",
 "Battery Volt": "3320 mV",
 "Air Pressure": "1031.36 hPa",
 "Air Temp": "26.09 C",
 "Object Temp": "15.531 C",
 "Ambient Temp": "26.312 C",
 "Light": "0.08 lux",
 "HDC Humidity": "34.73 %RH",
 "HDC Temp": "26.38 C",
 "Acc X": "0.02 G",
 "Acc Y": "0.00 G",
 "Acc Z": "-1.05 G",
 "Gyro X": "-2.11 deg per sec",
 "Gyro Y": "-1.10 deg per sec",
 "Gyro Z": "3.64 deg per sec</pre></div><div>Page hits: 18<br>Uptime: 2968 secs<br></div></body></html>"
}

【问题讨论】：

html 来自哪里？您不创建该变量。您需要将 html（一旦引用）拆分为 \n，然后拆分为 =，然后将其放入 JSON 对象中。
对不起，我以前从未使用过 html，只是短暂的所以我还是不明白，你能提供一个例子，说明我如何制作一个名为传感器的对象，值和键是传感器每个数据？

标签： javascript html json node.js

【解决方案1】：

您需要将字符串除以= 符号。之前的部分是关键，之后的部分是你的价值。

以下功能可能会解决此问题：

function jsonify(str) {
   var obj = {};
   str.split('\n').forEach((line) => {
      var key = line.split(' = ')[0];
      var value = line.split(' = ')[1];
      obj[key] = value;
   });
   return obj;
}

【讨论】：

用你的建议更新了代码，谢谢你的帮助 rafal :D

【解决方案2】：

我建议您使用 HTML 解析器（我个人认为 jQuery 易于使用，但 there are a LOT of options）从特定元素中查找和获取内容。然后你可以在结果上运行你的解析逻辑。

var response = '<html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href="index.html">Index</a> ] | [ <a href="config.html">Device Config</a> ]</p></div><div>Neighbors<pre>fe80::212:4b00:8b8:6ecb REACHABLE</pre></div><div>Default Route<pre>fe80::212:4b00:8b8:6ecb</pre></div><div>Routes<pre></pre></div><div>Sensors<pre>Battery Temp = 19 C\nBattery Volt = 3320 mV\nAir Pressure = 1031.12 hPa\nAir Temp = 22.66 C\nObject Temp = 12.375 C\nAmbient Temp = 23.062 C\nLight = 0.00 lux\nHDC Humidity = 43.93 %RH\nHDC Temp = 23.03 C\nAcc X = 0.02 G\nAcc Y = 0.02 G\nAcc Z = -1.10 G\nGyro X = -2.93 deg per sec\nGyro Y = -2.74 deg per sec\nGyro Z = 5.18 deg per sec</pre></div><div>Page hits: 4<br>Uptime: 138 secs<br></div></body></html>';

// Turn the result into an HTML DOM.
var responseDOM = $(response);

// Find the specific element you want (in this case, the third pre) and get its content.
var preContent = $('pre', responseDOM).eq(3).text();

// Now, split the content into lines, split again by " = ", and then merge the result back into a single object.
var obj = preContent
      // Split content into lines (by "\n")
      .split('\n')
      // split each line into key and value (by " = ")
      .map(line => line.split(' = '))
      // reduce each key value pair into a single object with properties
      .reduce( (acc,kvp) => { acc[kvp[0]] = kvp[1]; return acc; }, {})


// Finally, turn the object into a JSON string.
var json = JSON.stringify(obj);

console.log(json);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

非常感谢 JDB，但不幸的是我以前从未使用过 jquery，所以我什至不知道如何运行这个示例，我只知道带有 nodejs 的基本 JavaScript es6，因为我主要为嵌入式编程设备和系统，但我必须说一个非常干净的方法：D
如果你要进行网页抓取，那么你肯定需要某种合适的 HTML 解析器（按照我帖子中的链接）。尝试使用自己的方法就像尝试使用自己的内存管理或自己的加密一样。除了令人头疼的问题......当已经存在这么多高质量的选择时，你为什么要这样做！ :)
没错，没有人应该重新发明轮子，但这个概念对我来说太新了，经过数小时的研究，我迷失了方向，哈哈，是的，我一定会看看你发布的链接来探索其他选项，cheerz，ps真棒头像：D