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()）我可以轻松地进行查找和替换，但是当我必须确定元素的计算高度时，它会变得棘手，这不容易确定sans-JavaScript 。

有谁知道我怎么能做到这一点？谢谢！

Answer 1

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

来自PhantomJS homepage：

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

你可以通过$（'html'）。html（）（或者如果你不想要头标签这样的东西的更具体的选择器）来获取你修改过的内容，然后将它作为一个大字符串提交给你的服务器并写文件服务器端。

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

2 个答案: