通过JavaScript将OPML转换为HTML

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.

今天早些时候在与可爱的艾米史蒂芬( Amy Stephen)的讨论中，我想发表我阅读的RSS提要。 所以我想我需要在一个好的旧Web 1.0中解决这个问题。 的方法，找到一种从Google Reader抓取内容的方法。 对我来说幸运的是，我看到它们具有导出功能。 原来导出对我来说是一些新的OPML格式，主要是XML文件。 问题是获取XML并以最快的方式将其转换为HTML。 我想到的答案是使用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.

该演示在这里，它使用的是我的OPML文档，但是您可以粘贴您的演示并获得结果。 此外，如果您想修改产生HTML，可以(使用FirefoxF的JS控制台或Firebug，或在IE的地址栏中键入javascript：...)来调整我使用HTML“模板”。 只需设置属性opml2html.html_template和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.

实施过程轻而易举。 我用一个方法-parse()和两个属性(它们是html结果的模板)来做一个opml2html类/对象。 已经尝试过从XML字符串中获取XML文档对象，这部分只是复制/粘贴问题。

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.

剩下的就是从“大纲”元素获取属性，并替换我的html模板中的值。 有两个嵌套的大纲元素，我们只对内部的大纲元素感兴趣，因此跳过了对它们调用hasChildNodes()时返回TRUE的那些元素。

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.

有关完整的源代码，请检查演示，该演示应在IE和FF中运行。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/opml-to-html-via-javascript/