如何使用 Node.js 解析 HTML/XML 文档？答案

【问题标题】：How to parse HTML/XML documents with Node.js?如何使用 Node.js 解析 HTML/XML 文档？
【发布时间】：2016-03-22 10:39:09
【问题描述】：

我有一个包含generatePNG 函数的editor.html：

  <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Diagram</title> 

    <script type="text/javascript" src="lib/jquery-1.8.1.js"></script> 
//    <!-- I use many resources -->
<script></script> 

    <script> 

        function generatePNG (oViewer) { 
            var oImageOptions = { 
                includeDecoratorLayers: false, 
                replaceImageURL: true 
            }; 

            var d = new Date(); 
            var h = d.getHours(); 
            var m = d.getMinutes(); 
            var s = d.getSeconds(); 

            var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png"; 

            var sResultBlob = oViewer.generateImageBlob(function(sBlob) { 
                b = 64; 
                var reader = new window.FileReader(); 
                reader.readAsDataURL(sBlob); 
                reader.onloadend = function() { 
                    base64data = reader.result; 
                    var image = document.createElement('img'); 
                    image.setAttribute("id", "GraphImage"); 
                    image.src = base64data; 
                    document.body.appendChild(image); 
                } 

            }, "image/png", oImageOptions); 
            return sResult; 
        } 

    </script> 


</head> 

<body > 
    <div id="diagramContainer"></div> 
</body> 
</html>

我想访问 DOM 并使用 Node.js 获取 image.src。我发现我可以使用cheerio 或jsdom。

我从这个开始：

var cheerio = require('cheerio'),
    $ = cheerio.load('editor.html');

但我不知道如何访问和获取image.src。

【问题讨论】：

您想要获取的 image.src 是在 editor.html 中使用该页面中的 javascript 生成的？
@luiso 是的 image.src 是一个 based64 数据，它是在 editor.html 中生成的，我想从 node.js 服务器中提取它
为了澄清，您将 editor.html 加载到服务器上的cheerio 中？所以这里面没有涉及到浏览器？
@RogierSpieker 我只想从 node.js 访问 edtior.html 并获取 image.src
关于您的要求，我认为有两种可能性。您希望 Node.js 访问由 Web 浏览器在实时页面上生成的图像，或者您希望能够访问存储在 img 元素的 src 属性中的 html 文件中的图像数据。请澄清。

标签： javascript jquery node.js cheerio jsdom

【解决方案1】：

问题是通过将 html 文件加载到cheerio（或任何其他节点模块）中不会像浏览器那样处理 HTML。不会像在浏览器中那样加载和/或处理资源（例如样式表、图像和 javascript）。

虽然 node.js 和现代网络浏览器都具有相同（或相似）的 javascript 引擎，但是浏览器添加了很多额外的东西，例如 window、DOM (document) 等。 Node.js 没有这些概念，所以没有window.FileReader 也没有document.createElement。

如果图像是在完全没有用户交互的情况下创建的（您的代码示例“神奇地”接收到 sBlob 参数，它似乎是一个类似 data:<type>;<encoding>,<data> 的字符串），您可以在服务器上使用所谓的无头浏览器，@987654321 @ 这几天似乎最受欢迎。再说一次，如果创建 sBlob 不需要用户交互，你可能最好使用纯 node.js 解决方案，例如How do I parse a data URL in Node?.

如果创建sBlob 需要某种用户交互，并且您需要将其存储在服务器上，您可以使用与提到的几乎相同的解决方案，只需将sBlob 发送到服务器使用Ajax 或 websocket，将sBlob 处理成图像并（可选）返回查找图像的 URL。

【讨论】：