All geek questions in one place

Modifying an HTML file in NodeJS

Let me preface with two things. I am currently using grunt for these tasks, and I also know about Yeoman, which has what I ask for. I really like Yeomen, but he's too stubborn for this particular project I'm working on.

So, I have the following HTML file:

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- START-CSS-MIN:css/build/min.css --> <link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/boilerplate.css"> <!-- END-CSS-MIN --> <!-- START-JS-MIN:js/build/modernizr.js --> <script src="js/libraries/modernizr.js"></script> <!-- END-JS-MIN --> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p> <!-- START-JS-MIN:js/build/libraries.js --> <script src="js/libraries/underscore.js"></script> <script src="js/libraries/jquery/jquery.js"></script> <!-- END-JS-MIN --> </body> </html>

Now you can see CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that correctly collects all of these files in comments (using htmlparser) and then minimizes and concatenates them as directly based on the comments. The final step in the build process is to create a new version of this HTML file (for use in production) that replaces comments with a new file. For example, the above code will be converted to this:

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/build/min.css"> <script src="js/build/modernizr.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p> <script src="js/build/libraries.js"></script> </body> </html>

I have a question, how can I do this in NodeJS? The htmlparser NPM module is great for parsing HTML, but now I need something where I modify the HTML (removing and adding certain elements in certain places). Are there any good packages / tutorials on how to do this in NodeJS code?

+4
source share
1 answer

I'm not quite sure if this is useful for comment lines, but this should be less of a problem to solve than the DOM link.

Consider using: https://github.com/tmpvar/jsdom

There are other options. (Https://github.com/joyent/ node / wiki / modules)

+2
source

Source: https://habr.com/ru/post/1442057/

More articles:


All Articles