I want to load an HTML file (using fs.read), load the DOM using jsdom, and then change the text of the nodes of the body (via jquery). Then I want to save the edited DOM window as an HTML file. Is there a way to do this? The code I am using is the following:

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?
        });
    });
});

I want to load an HTML file (using fs.read), load the DOM using jsdom, and then change the text of the nodes of the body (via jquery). Then I want to save the edited DOM window as an HTML file. Is there a way to do this? The code I am using is the following:

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?
        });
    });
});

• javascript
• jquery
• html
• node.js
• jsdom

• I think there are two wrong things about $(document.body.getElementsByTagName("*")). First, it's a combination of jQuery and javascript selectors. It should be $("*") in jQuery, or document.body.getElementsByTagName("*") in javascript. Secondly, it's server-side code, so jQuery is not available here, unless I don't know about server-side implementation of jQuery. – Jeremy Thille Commented May 8, 2015 at 9:47
• I forgot to include var $ = require('jquery')(window) in this post, so I edited it to include it. When using document.body.getElementsByTagName("*") (without jquery), can I just edit the text of each node? And then save the edited html? – Eva Commented May 8, 2015 at 10:48
• Still, $(document.body.getElementsByTagName("*")) doesn't make sense and is probably invalid, even with jQuery loaded. So you're telling me you're running jQuery server-side? I searched around and I can see no place where this is used, or even saying it's possible at all. jQuery is made for DOM manipulationsm and there's no DOM on a server. There's something I don't understand here. fs is a SERVER module, and read and write can only be achieved from a server, not a browser. Please confirm this is a server-side script ( = NOT run in a browser) and you're trying to use jQuery in it. – Jeremy Thille Commented May 8, 2015 at 10:54
• I got that from another stackoverflow question. This is indeed a server side script. I am using the npm module for jquery for this (npmjs.com/package/jquery). – Eva Commented May 8, 2015 at 10:57
• This is a module to build your own version of jQuery, not use it server-side. Still, jQuery is client-side, it doesn't run on a server. Your server script must use plain javascript. document.body.getElementsByTagName does make no sense at all, because on a server, there is no DOM, there are no elements, and no tag (with no name). This just can't work, you're mixing front-end and back-end code. It's like mixing javascript and PHP together, hoping it will work, it's just impossible. – Jeremy Thille Commented May 8, 2015 at 11:00

2 Answers 2

Here's an example of how to do it. I've based it on your code but simplified it a bit so that I'd have code that executes and illustrates how to do it. The following code reads foo.html and adds the text modified! to all p element and then writes it out to out.html. The main thing you were missing is 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;
        });
    });
});

There's no jsdom.env() anymore, and I think this example is easier to understand:

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');
    });
});