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

Question

我有一个包含 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。

Answer 1

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

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

如果图像是完全在没有用户交互的情况下创建的（您的代码示例 'magically' 收到 sBlob 参数，它似乎是一个类似于 data:<type>;<encoding>,<data> 的字符串），您可以使用所谓的服务器上的无头浏览器，PhantomJS 最近似乎最流行。再一次，如果创建 sBlob 不需要用户交互，您最好使用纯 node.js 解决方案，例如How do I parse a data URL in Node?.

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

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

How to parse HTML/XML documents with Node.js?

javascript

jquery

node.js

jsdom

cheerio