Pure JavaScript HTML Parser

John Resig did it again. One of my top 5 web development gurus released a handy javascript HTML parser. Although probably every developer that uses javascript on a semi-daily basis will say “Oh yes Greg, this is a handy piece of javascript” for me it is pure gold, salvation, totally awesome stuff.

While working at Cognifide and creating CMS based solutions dealing with valid XHTML can get sometimes hard. Let me give you an example: client wants a top notch valid site, we deliver that, client enters own content and sometimes site stops being valid. Why is that? Well, because sometimes entered content is not valid XHTML and messes things up. For the record: we love all our clients and this doesn’t happen too often.

Enter John’s parser. This little thing is great. It can get HTML (really not valid, a horrible little monster) and turn it into a lovely clean XML. Yep, it fixes tags, attributes, block and inline elements. Pure gold I tell you. If that didn’t make you fall in love with The Parser, here is a little gem for you: it can take HTML string and turn it into a DOM tree. How cool is that? If only I got a nickel for every time a server side developer came to me (obviously I didn’t look busy enough) and asked for a little piece of javascript that generates some kind of DOM structure, I’d be a rich guy. 

So what are some of the key features of Pure JavaScript HMTL Parser? Here it goes. My top 3 list:

• HTMLtoDOM("<p>Hello <b>World" ,document.getElementById("test")) - this snippet parses input string, makes it valid XML, converts it to DOM and appends it to a specified page element. Sweet!
• HTMLtoXML("<img src=test.jpg>") - this one fixes the attribute declaration and adds missing closing  ”/” at the end of a tag and produces <img src="test.jpg"/>. One of my personal pet peeves. Have been fighting with that for ages.
• HTMLtoXML("<p>Hello<p>World") - this one is pretty cool as well, it automatically adds missing tag closings and produces: <p>Hello</p><p>World</p>