编辑 jsdom window 中的元素并将 window 另存为新的 HTML 文件？

Question

我想加载一个 HTML 文件（使用 fs.read），使用 jsdom 加载 DOM，然后更改正文节点的文本（通过 jquery).然后我想将编辑好的 DOM window 保存为 HTML 文件。有没有办法做到这一点？我使用的代码如下：

fs.readFile(file, 'utf8', function(error, data) {
    jsdom.env(data, [], function (errors, window) {
        var $ = require('jquery')(window);
        $(document.body.getElementsByTagName("*")).each(function () {
            var content = $(this).text();
            var word = "\b"+wordSuggestions.word+"\b";
            var re = new RegExp(word, "g");
            content = content.replace(re, wordSuggestions.suggestion);
            $(this).text(content);
        });

        fs.writeFile(file, data, function (error){ // saving the new HTML file? What should I put instead of data? Window?
        });
    });
});

Answer 1

这是一个如何操作的示例。我以您的代码为基础，但对其进行了一些简化，以便我拥有可执行的代码并说明如何执行此操作。以下代码读取 foo.html 并将文本 modified! 添加到所有 p 元素，然后将其写出到 out.html。您缺少的主要内容是 window.document.documentElement.outerHTML.

var jsdom = require("jsdom");
var fs = require("fs");

fs.readFile('foo.html', 'utf8', function(error, data) {
    jsdom.env(data, [], function (errors, window) {
        var $ = require('jquery')(window);
        $("p").each(function () {
            var content = $(this).text();
            $(this).text(content + " modified!");
        });

        fs.writeFile('out.html', window.document.documentElement.outerHTML,
                     function (error){
            if (error) throw error;
        });
    });
});

Answer 2

没有jsdom.env()了，我觉得这个例子更容易理解：

const fs = require('fs');
const jsdom = require('jsdom');
const jquery = require('jquery');

fs.readFile('1.html', 'utf8', (err, data) => {
    const dom = new jsdom.JSDOM(data);
    const $ = jquery(dom.window);
    $('body').html('');
    fs.writeFile('2.html', dom.serialize(), err => {
        console.log('done');
    });
});

编辑 jsdom window 中的元素并将 window 另存为新的 HTML 文件？

Edit elements in the jsdom window and save the window as a new HTML file?

html

javascript

jquery

node.js

jsdom