我有大约 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 的情况下无法轻松确定该高度。
有谁知道我怎样才能实现这一目标?谢谢!
虽然第一部分确实可以使用正则表达式或更完整的 JavaScript DOM 实现在“文本模式”下解决,但对于第二部分(高度计算),您需要一个真正的、完整的浏览器或无头引擎,例如PhantomJS.
来自PhantomJS 主页 http://www.phantomjs.org/:
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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)