Renders htmlparser2 data into HTML

example.js

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.txt

Output: Xyz <script language='javascript'>var foo = '<<bar>>';</script><!--<!-- Waah! -- -->
Raw In: Xyz <script language= javascript>var foo = '<<bar>>';< /  script><!--<!-- Waah! -- -->

parser.js

// 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();

renderer.js

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("");
};

Hey thanks for taking some time to look at this. It looks like your version is compatible with 2.x.

One line that's curious to me is if (elem.raw === null) return;. What's going on here?

Thanks!

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.

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.