CODEWITHSUNDEEP
javascripthtmlnode.jstemplates
user3188101
user3188101

Reputation: 99

How to replace the content of multiple tags in html-file? [Node.js]

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!

Upvotes: 2

Views: 5452

Answers (2)

Jay
Jay

Reputation: 19877

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>

Upvotes: 10

Travis J
Travis J

Reputation: 82307

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

Upvotes: 1

Related Questions