问题描述
我有大约100个静态HTML页面,我想应用一些DOM操作。他们都遵循相同的HTML结构。我想对每个这些文件应用一些DOM操作,然后保存生成的HTML。
I have about 100 static HTML pages that I want to apply some DOM manipulations to. They all follow the same HTML structure. I want to apply some DOM manipulations to each of these files, and then save the resulting HTML.
这些是我要应用的操作:
These are the manipulations I want to apply:
# [start]
$("h1.title, h2.description", this).wrap("<hgroup>");
if ( $("h1.title").height() < 200 ) {
$("div.content").addClass('tall');
}
# [end]
# SAVE NEW HTML
第一行( .wrap()
)我可以轻松地找到和替换,但是当我需要确定元素的计算高度时,它会变得棘手,这可以不容易被确定sans-JavaScript。有没有人知道我能如何实现这个目标?
The first line (.wrap()
) I could easily do with a find and replace, but it gets tricky when I have to determine the calculated height of an element, which can't be easily be determined sans-JavaScript.
谢谢!
推荐答案
虽然第一部分可以使用正则表达式或更完整的DOM实现在文本模式中解决JavaScript,对于第二部分(高度计算),您将需要一个真正的,完整的浏览器或无头引擎,如 PhantomJS 。
While the first part could indeed be solved in "text mode" using regular expressions or a more complete DOM implementation in JavaScript, for the second part (the height calculation), you'll need a real, full browser or a headless engine like PhantomJS.
从:
下面是一个示意图说明(我承认没有测试)。
A schematic instruction (which I admit is not tested) follows.
在你的修改脚本(比如说,修改-html-file.js
)打开一个HTML页面,修改它的DOM树和 console.log
根元素的HTML:
In your modification script (say, modify-html-file.js
) open an HTML page, modify it's DOM tree and console.log
the HTML of the root element:
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:
Next, save the new HTML by redirecting your script's output to a file:
#!/bin/bash
mkdir modified
for i in *.html; do
phantomjs modify-html-file.js "$1" > modified/"$1"
done
这篇关于将DOM操作应用于HTML并保存结果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!