将 DOM 操作应用于 HTML 并保存结果？

Question

我有大约 100 个静态 HTML 页面，我想对其应用一些 DOM 操作。它们都遵循相同的 HTML 结构。我想对每个文件应用一些 DOM 操作，然后保存生成的 HTML。

这些是我想要应用的操作：

# [start]
$("h1.title, h2.description", this).wrap("<hgroup>");
if ( $("h1.title").height() < 200 ) {
  $("div.content").addClass('tall');
}
# [end]
# SAVE NEW HTML

第一行 (.wrap()) 我可以轻松地使用查找和替换来完成，但是当我必须确定元素的计算高度时，它会变得棘手，在没有 JavaScript 的情况下无法轻松确定。

有谁知道我怎样才能实现这一目标？谢谢！

Answer 1

虽然第一部分确实可以使用正则表达式或更完整的 JavaScript DOM 实现在“文本模式”下解决，但对于第二部分（高度计算），您需要一个真正的、完整的浏览器或无头引擎，例如 <强>PhantomJS。

从 PhantomJS 主页：

PhantomJS是一个打包并嵌入WebKit的命令行工具。
从字面上看，它的行为就像任何其他基于 WebKit 的 Web 浏览器，除了
屏幕上不会显示任何内容（因此，术语“无头”）。在
除此之外，PhantomJS 可以使用其控制或编写脚本
JavaScript API。

---

下面是一个示意性说明（我承认没有经过测试）。

在修改脚本（例如 modify-html-file.js）中打开一个 HTML 页面，修改其 DOM 树和 console.log 根元素的 HTML

var page = new WebPage();

page.open(encodeURI('file://' + phantom.args[0]), function (status) {
    if (status === 'success') {
        var html = page.evaluate(function () {
            // your DOM manipulation here
            return document.documentElement.outerHTML;
        });
        console.log(html);
    }
    phantom.exit();
});

： ，通过将脚本的输出重定向到文件来保存新的 HTML：

#!/bin/bash

mkdir modified
for i in *.html; do
    phantomjs modify-html-file.js "$1" > modified/"$1"
done

Answer 2

我尝试了 PhantomJS 如katspaugh 的回答，但在尝试操作页面时遇到了几个问题。我的用例是修改 Doxygen 的静态 html 输出，而不修改 Doxygen 本身。目标是通过从页面中删除不必要的元素并将其转换为 HTML5 来减少交付的文件大小。此外，我还想使用 jQuery 更轻松地访问和修改元素。

在 PhantomJS 中加载页面

自接受答案以来，API 似乎发生了巨大变化。此外，我使用了一种不同的方法（源自这个答案），这对于缓解我遇到的主要问题之一非常重要。遭遇。

var system = require('system');
var fs = require('fs');
var page = require('webpage').create();

// Reading the page's content into your "webpage"
// This automatically refreshes the page
page.content = fs.read(system.args[1]);

// Make all your changes here

fs.write(system.args[2], page.content, 'w');
phantom.exit();

阻止 JavaScript 运行

我的页面在页脚中使用了 Google Analytics，现在页面的修改超出了我的意图，大概是因为运行了 javascript。如果我们禁用 javascript，我们实际上无法使用 jQuery 来修改页面，因此这不是一个选项。我尝试过暂时更改标签，但当我这样做时，每个特殊字符都会被替换为 html 转义的等效字符，从而破坏页面上的所有 javascript 代码。然后，我遇到了 这个答案，它给了我以下想法。

var rawPageString = fs.read(system.args[1]);
rawPageString = rawPageString.replace(/<script type="text\/javascript"/g, "<script type='foo/bar'");
rawPageString = rawPageString.replace(/<script>/g, "<script type='foo/bar'>");

page.content = rawPageString;

// Make all your changes here

rawPageString = page.content;
rawPageString = rawPageString.replace(/<script type='foo\/bar'/g, "<script");

添加 jQuery

有实际上是一个关于如何使用 jQuery 的示例。不过，我认为离线副本会更合适。最初我尝试使用 page.includeJs 如示例中所示，但发现 page.injectJs 更适合该用例。与 includeJs 不同，页面上下文中没有添加

page.injectJs("jquery-2.1.4.min.js");
page.evaluate(function () {

  // Make all changes here

  // Remove the foo/bar type more easily here
  $("script[type^=foo]").removeAttr("type");
});

fs.write(system.args[2], page.content, 'w');
phantom.exit();

将它们放在一起

var system = require('system');
var fs = require('fs');
var page = require('webpage').create();

var rawPageString = fs.read(system.args[1]);
// Prevent in-page javascript execution
rawPageString = rawPageString.replace(/<script type="text\/javascript"/g, "<script type='foo/bar'");
rawPageString = rawPageString.replace(/<script>/g, "<script type='foo/bar'>");

page.content = rawPageString;

page.injectJs("jquery-2.1.4.min.js");
page.evaluate(function () {

  // Make all changes here

  // Remove the foo/bar type
  $("script[type^=foo]").removeAttr("type");
});

fs.write(system.args[2], page.content, 'w');
phantom.exit();

从命令行使用它：

phantomjs modify-html-file.js "input_file.html" "output_file.html"

注意：这已经过测试，并且可以在 Windows 8.1 上与 PhantomJS 2.0.0 一起使用。

专业提示：如果速度很重要，您应该考虑从您的文件中迭代文件PhantomJS 脚本而不是 shell 脚本。这将避免 PhantomJS 启动时的延迟。

Answer 3

您可以通过 $('html').html() 获取修改后的内容（如果您不想要诸如 head 标签之类的内容，则可以使用更具体的选择器），然后将其作为大字符串提交到您的服务器并写入文件服务器边。