2

We have html-file:

<div class="my1">MY1</div>
<h1 class="my2">MY2</h1>
<p class="my3">MY3</p>
<div class="my2">MY2</div>

and json-file with replace values:

{
    "my1":"new my1",
    "my2":"new my2",
    "my3":"new my3"
}

In result must be new html-file with new values.

How to do this? Without DOM!

2
  • 1
    Did you do some research regarding this problem? Commented Jan 12, 2014 at 19:47
  • 2
    Of course, but didn't find a simple explanation of what to do. Commented Jan 12, 2014 at 19:56

2 Answers 2

10

I don't understand why you are against DOM building as it is relativity easy to do. There are lightweight modules such as cheerio that fulfill your requirements and have a simple API (similar to JQuery).

Fully working example

This example does exactly what you want using the cheerio node module.

Files

replace.js

var fs = require('fs')
, cheerio = require('cheerio');

// html file we are working on
var htmlPath = __dirname + '/htmlFile.html';
// html file to output modified html to
var outPath = __dirname + '/htmlFixed.html';

// load in the json file with the replace values
var replaceValues = require('./replaceValues.json');

fs.readFile(htmlPath, {encoding: 'utf8'}, function(error, data) {
    var $ = cheerio.load(data); // load in the HTML into cheerio

    for (var key in replaceValues) {
        // the keys are class names, use them to pick out what element
        // we are going to modify & then replace the innerHTML content
        // of that element
        $('.' + key).html(replaceValues[key]);
    }

    fs.writeFile(outPath, $.html());
});

htmlFile.html

<div class="my1">MY1</div>
<h1 class="my2">MY2</h1>
<p class="my3">MY3</p>
<div class="my2">MY2</div>

replaceValues.json

{
    "my1":"new my1",
    "my2":"new my2",
    "my3":"new my3"
}

Usage

node replace.js

Results

After running the script, you will have a new file in the same directory as the original HTML file named htmlFixed.html with the changes performed with the contents:

<div class="my1">new my1</div>
<h1 class="my2">new my2</h1>
<p class="my3">new my3</p>
<div class="my2">new my2</div>
Sign up to request clarification or add additional context in comments.

2 Comments

Can you explain why? This is relatively simple and solves your problem.
so delivered exercise
1

Node.js does not have any notion of a Document Object Model (i.e. the DOM) -- "Why doesn't node.js have a native DOM?" -- and as such does not have access to a way to instantiate HTML Elements (which would be nice to have access to in order to parse your html).

As a result, you must import a library to use as a parser (just like any other server side implementation must when dealing with html - don't regex it!).

The current leader in doing this is jsDOM

2 Comments

@user3188101 - The word is "parsing". You need to parse the HTML in your text file. In order to parse it, you must load it into a parser. There is no "DOM building" here, it is emulating the DOM in order to parse your text file.
+1 @TravisJ I must have missed your answer as I was typing mine out yesterday. Would have saved me some time ;-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.