將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() ）我可以很容易地使用查找和替換，但是當我必須確定元素的計算高度時，它變得棘手，這不能輕易地確定sans-JavaScript。

有誰知道我怎么能做到這一點？ 謝謝！

Answer 1

雖然第一部分確實可以在“文本模式”中使用正則表達式或更完整的JavaScript實現在JavaScript中解決，但對於第二部分（高度計算），您需要一個真實的，完整的瀏覽器或像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

我在katspaugh的回答中嘗試了PhantomJS ，但在試圖操縱頁面時遇到了幾個問題。 我的用例是修改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-escaped等價物，破壞了頁面上的所有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不同，頁面上下文中沒有添加<script>標記，並且調用阻止了執行，簡化了代碼。 jQuery被放置在我執行腳本的同一目錄中。

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（）（或者如果您不想要頭標記之類的東西，更具體的選擇器）獲取您修改的內容，然后將其作為大字符串提交到您的服務器並編寫文件服務器側。