dannysmc95 dannysmc95 - 7 months ago 12
Javascript Question

How to make a HTML Parser in JavaScript

I am very new to JavaScript and I have been tasked by my job to make a HTML Parser that can go through lines of a html file and find say an ID tag and then match it with an excel sheet (or CSV), and then swap the ID with a value from the spreadsheet / CSV file.

NOTE: I am not asking you to do it for me; just I have looked through loads and I am just not aware of the right parser I need. A point in the right direction would be great thanks.

Here is an example of a HTML document with IDs: (The ID's are prefixed with #IDHERE# as I don't know how to prefix an ID without the parser yet)

<html>
<head>
//Header Data Here
</head>
<body>
<h1>#ID_MainTitle#</h1>
<p>#ID_Para1#</p>
</body>
</html>


Here is a table (Lua) (could be excel etc, but just for an example):

{
["ID_MainTitle"] = "Hello World",
["ID_Para1"] = "This is a test!",
}


This would need to be the end result:

<html>
<head>
//Header Data Here
</head>
<body>
<h1>Hello World</h1>
<p>This is a test!</p>
</body>
</html>


I know it's not much help but I did have a look but none of the ones I found looked remotely like what I need.

Answer

As one commenter said, you've re-invented the notion of HTML templates. People have already written dozens if not hundreds of templating engines.

To do this, you do not need to "parse HTML". You essentially view the HTML as a big string with magic placeholders (in your case, things between #), and the template engine is essentially a kind of macro processor which does string replacement. You can do anything you want with the resulting, interpolated HTML: save it to a file, or send it down to the browser, or if you are already in the browser stick it in the DOM.

Write your template like so (let's say this is in a string called templateSource):

<html>
  <head>
    //Header Data Here
  </head>
  <body>
    <h1>{{ID_MainTitle}}</h1>
    <p>{{ID_Para1}}</p>
  </body>
</html>

Define your values for interpolation:

data = {
  ID_MainTitle: "Hello World",
  ID_Para1: "This is a test!"
};

Then compile the template and run it:

var template = Handlebars.compile(templateSource);
var result = template(data);

Your resulting, interpolated HTML will be in result.

There are minor differences depending whether you want to do this in a server like node, or on the browser.

These days, JS programmers do less "programming", and more calling of APIs. A key skill is to find the thing that has already been written and figure out how to use it and glue it together with other components.

Comments