我有大约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.
有谁知道我怎么能做到这一点？谢谢！
解决方法
虽然第一部分确实可以在“文本模式”中使用正则表达式或JavaScript中更完整的DOM实现来解决,但对于第二部分(高度计算),您需要一个真实的完整浏览器或像PhantomJS这样的无头引擎.
PhantomJS is a command-line tool that packs and embeds WebKit.
Literally it acts like any other WebKit-based web browser,except that
nothing gets displayed to the screen (thus,the term headless). In
addition to that,PhantomJS can be controlled or scripted using its
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();
});
#!/bin/bash
mkdir modified
for i in *.html; do
phantomjs modify-html-file.js "$1" > modified/"$1"
done
