OPML to HTML via JavaScript

Earlier today in a discussion with the lovely Amy Stephen, I thought of posting the RSS feeds I read. So I was thinking I would need to approach this in a good old web 1.0. way, finding a way to scrap content from the Google Reader. Luckily for me, I saw they have an Export feature. Turns out the export is in some new to me OPML format, basically an XML document. The question was to get the XML and turn it into HTML the festest way. The answer I came up with was to use JavaScript.

Demo

The demo is here, it's using my OPML doc, but you can paste yours and get the result. Further if you want to modify the HTML produced you can (using FirefoxF's JS console or Firebug, or typing javascript:... in IE's address bar) tweak the HTML "templates" I'm using. Just set the properties opml2html.html_template and opml2html.item_template.

Implementation

Implementation was a breeze. I did an opml2html class/object with one method - parse() and two attributes which are the templates for the html result. Having already experimented with getting an XML document object out of XML string, this part was a matter of copy/paste.

var doc;
// code for IE
if (window.ActiveXObject) {
    doc = new ActiveXObject("Microsoft.XMLDOM");
    doc.async = false;
    doc.loadXML(opml);
// code for Mozilla, Firefox, Opera, etc.
} else {
    var parser = new DOMParser();
    doc = parser.parseFromString(opml,"text/xml");
}

The rest is getting the attributes from the "outline" elements and replacing the values in my html templates. There are two nested outline elements and we're interested only in the inner ones, so the ones that return TRUE when calling hasChildNodes() on them are skipped.

var outlines = doc.getElementsByTagName('outline');
 
var html = '';
for (var i = 0, max = outlines.length; i < max; i++) {
 
  curr = outlines[i];
  if (!curr.hasChildNodes()) {
    title   = curr.getAttribute('title');
    htmlurl = curr.getAttribute('htmlUrl');
    xmlurl  = curr.getAttribute('xmlUrl');
    html += this.item_template.replace(/{TITLE}/, title)
            .replace(/{HTMLURL}/, htmlurl)
            .replace(/{XMLURL}/, xmlurl);
  }
 
}
var opml_title = doc.getElementsByTagName('title')[0]
                    .firstChild.nodeValue;
html = this.html_template.replace(/{ITEMS}/, html)
               .replace(/{OPMLTITLE}/, opml_title);
return html;

For the full source, check the demo, should work in IE and FF.

Comments? Feedback? Find me on Twitter, Mastodon, Bluesky, LinkedIn, Threads