Skip to content

Instantly share code, notes, and snippets.

@siddMahen
Created December 16, 2011 13:33
Show Gist options
  • Save siddMahen/1486071 to your computer and use it in GitHub Desktop.
Save siddMahen/1486071 to your computer and use it in GitHub Desktop.
Renders htmlparser2 data into HTML
var render = require("./renderer");
// The output of parser.js
var t = [
{
data: 'Xyz ', type: 'text'
},
{
type: 'script',
name: 'script',
attribs: { language: 'javascript' },
children: [ {
data: 'var foo = \'<<bar>>\';',
type: 'text'
} ]
},
{
data: '<!-- Waah! -- ',
type: 'comment'
}
];
var res = render(t);
console.log(res);
Output: Xyz <script language='javascript'>var foo = '<<bar>>';</script><!--<!-- Waah! -- -->
Raw In: Xyz <script language= javascript>var foo = '<<bar>>';< / script><!--<!-- Waah! -- -->
// Generates the data structure which is used in example.js from raw HTML
var htmlparser = require("htmlparser2"),
util = require("util");
var rawHtml = "Xyz <script language= javascript>var foo = '<<bar>>';< / script><!--<!-- Waah! -- -->";
var handler = new htmlparser.DefaultHandler(function (error, dom) {
console.log(util.inspect(dom, false, 4));
});
var parser = new htmlparser.Parser(handler);
parser.write(rawHtml);
parser.done();
var singleTag = {
area: 1,
base: 1,
basefont: 1,
br: 1,
col: 1,
frame: 1,
hr: 1,
img: 1,
input: 1,
isindex: 1,
link: 1,
meta: 1,
param: 1,
embed: 1,
include: 1,
yield: 1
};
var tagType = {
tag: 1,
script: 1,
link: 1,
style: 1,
template: 1
};
var render = module.exports = function(dom, output) {
dom = Array.isArray(dom) ? dom : [dom];
output = output || [];
var renderTag = function(elem) {
var tag = "<" + elem.name;
if (elem.attribs) {
var attrstring = "";
Object.keys(elem.attribs).forEach(function(element, index, array){
attrstring += " "+element+"="+"'"+elem.attribs[element]+"'";
});
tag += attrstring;
}
if (!singleTag[elem.name])
tag += ">";
else
tag += "/>";
return tag;
};
var renderDirective = function(elem) { return "<" + elem.data + ">" };
var renderText = function(elem) { return elem.data };
var renderComment = function(elem) { return '<!--' + elem.data + '-->' };
dom.forEach(function(elem, i){
var str = elem.name;
var data = elem.data || "";
if (elem.raw === null) return;
if (data[0] === '%' && data[data.length - 1] === '%')
elem.type = "template";
if (tagType[elem.type])
output.push(renderTag(elem));
else if (elem.type === "directive")
output.push(renderDirective(elem));
else if (elem.type === "comment")
output.push(renderComment(elem));
else
output.push(renderText(elem));
if (elem.children) output.push(render(elem.children));
if (!singleTag[elem.name] && tagType[elem.type])
output.push("</" + elem.name + ">");
});
return output.join("");
};
@siddMahen
Copy link
Author

It's just continue for forEach(func) style iteration. Rather than loop using a for(...) loop structure, I'm using forEach(func) structure, and if (elem.raw === null) return; is equavalent to the coffee

if elem.raw is null 
      continue

statement.

@matthewmueller
Copy link

Oh okay yah, my bad. That was still part of my code. So htmlparser2 v2.0.1 doesn't actually use the raw attribute anymore, so that should be removed going forward.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment