如何使用 JavaScript 解析 RSS 提要？

Question

我需要解析 RSS 提要（XML 2.0 版）並在 HTML 頁面中顯示解析的詳細信息。

Answer 1

解析提要

使用jQuery的jFeed

_{（真的不推薦那個，請參閱其他選項。）}

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});

使用jQuery的內置 XML 支持

$.get(FEED_URL, function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

使用jQuery和Google AJAX Feed API

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

但這意味着您依賴於他們在線且可訪問。

---

建築內容

一旦您成功地從提要中提取了您需要的信息，您就可以創建DocumentFragment s（使用document.createDocumentFragment()包含您想要注入以顯示您的數據的元素（使用document.createElement()創建document.createElement() 。

---

注入內容

在頁面上選擇您想要的容器元素並將您的文檔片段附加到它，然后簡單地使用 innerHTML 完全替換其內容。

就像是：

$('#rss-viewer').append(aDocumentFragmentEntry);

要么：

$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

---

測試數據

使用這個問題的 feed ，在撰寫本文時給出：

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:re="http://purl.org/atompub/rank/1.0">
    <title type="text">How to parse a RSS feed using javascript? - Stack Overflow</title>
    <link rel="self" href="https://stackoverflow.com/feeds/question/10943544" type="application/atom+xml" />
        <link rel="hub" href="http://pubsubhubbub.appspot.com/" />        
    <link rel="alternate" href="https://stackoverflow.com/q/10943544" type="text/html" />
    <subtitle>most recent 30 from stackoverflow.com</subtitle>
    <updated>2012-06-08T06:36:47Z</updated>
    <id>https://stackoverflow.com/feeds/question/10943544</id>
    <creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license> 
    <entry>
        <id>https://stackoverflow.com/q/10943544</id>
        <re:rank scheme="http://stackoverflow.com">2</re:rank>
        <title type="text">How to parse a RSS feed using javascript?</title>
        <category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://stackoverflow.com/feeds/question/10943544/tags" term="jquery-mobile"/>
        <author>
            <name>Thiru</name>
            <uri>https://stackoverflow.com/users/1126255</uri>
        </author>
        <link rel="alternate" href="https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript" />
        <published>2012-06-08T05:34:16Z</published>
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">
            &lt;p&gt;I need to parse the RSS-Feed(XML version2.0) using XML and I want to display the parsed detail in HTML page, I tried in many ways. But its not working. My system is running under proxy, since I am new to this field, I don&#39;t know whether it is possible or not. If any one knows please help me on this. Thanks in advance.&lt;/p&gt;

        </summary>
    </entry>
    <entry>
        <id>https://stackoverflow.com/questions/10943544/-/10943610#10943610</id>
        <re:rank scheme="http://stackoverflow.com">1</re:rank>
        <title type="text">Answer by haylem for How to parse a RSS feed using javascript?</title>
        <author>
            <name>haylem</name>
            <uri>https://stackoverflow.com/users/453590</uri>
        </author>    
        <link rel="alternate" href="https://stackoverflow.com/questions/10943544/how-to-parse-a-rss-feed-using-javascript/10943610#10943610" />
        <published>2012-06-08T05:43:24Z</published>   
        <updated>2012-06-08T06:35:22Z</updated>
        <summary type="html">&lt;h1&gt;Parsing the Feed&lt;/h1&gt;

&lt;h3&gt;With jQuery&#39;s jFeed&lt;/h3&gt;

&lt;p&gt;Try this, with the &lt;a href=&quot;http://plugins.jquery.com/project/jFeed&quot; rel=&quot;nofollow&quot;&gt;jFeed&lt;/a&gt; &lt;a href=&quot;http://www.jquery.com/&quot; rel=&quot;nofollow&quot;&gt;jQuery&lt;/a&gt; plug-in&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery&#39;s Built-in XML Support&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;$.get(FEED_URL, function (data) {
    $(data).find(&quot;entry&quot;).each(function () { // or &quot;item&quot; or whatever suits your feed
        var el = $(this);

        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + el.find(&quot;title&quot;).text());
        console.log(&quot;author     : &quot; + el.find(&quot;author&quot;).text());
        console.log(&quot;description: &quot; + el.find(&quot;description&quot;).text());
    });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;With jQuery and the Google AJAX APIs&lt;/h3&gt;

&lt;p&gt;Otherwise, &lt;a href=&quot;https://developers.google.com/feed/&quot; rel=&quot;nofollow&quot;&gt;Google&#39;s AJAX Feed API&lt;/a&gt; allows you to get the feed as a JSON object:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$.ajax({
  url      : document.location.protocol + &#39;//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;amp;num=10&amp;amp;callback=?&amp;amp;q=&#39; + encodeURIComponent(FEED_URL),
  dataType : &#39;json&#39;,
  success  : function (data) {
    if (data.responseData.feed &amp;amp;&amp;amp; data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log(&quot;------------------------&quot;);
        console.log(&quot;title      : &quot; + e.title);
        console.log(&quot;author     : &quot; + e.author);
        console.log(&quot;description: &quot; + e.description);
      });
    }
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;But that means you&#39;re relient on them being online and reachable.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Building Content&lt;/h1&gt;

&lt;p&gt;Once you&#39;ve successfully extracted the information you need from the feed, you need to create document fragments containing the elements you&#39;ll want to inject to display your data.&lt;/p&gt;

&lt;hr&gt;

&lt;h1&gt;Injecting the content&lt;/h1&gt;

&lt;p&gt;Select the container element that you want on the page and append your document fragments to it, and simply use innerHTML to replace its content entirely.&lt;/p&gt;
</summary>
    </entry></feed>

處決

使用 jQuery 的內置 XML 支持

調用：

$.get('https://stackoverflow.com/feeds/question/10943544', function (data) {
    $(data).find("entry").each(function () { // or "item" or whatever suits your feed
        var el = $(this);

        console.log("------------------------");
        console.log("title      : " + el.find("title").text());
        console.log("author     : " + el.find("author").text());
        console.log("description: " + el.find("description").text());
    });
});

打印出來：

------------------------
title      : How to parse a RSS feed using javascript?
author     : 
            Thiru
            https://stackoverflow.com/users/1126255

description: 
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : 
            haylem
            https://stackoverflow.com/users/453590

description: 

使用 jQuery 和 Google AJAX API

調用：

$.ajax({
  url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://stackoverflow.com/feeds/question/10943544'),
  dataType : 'json',
  success  : function (data) {
    if (data.responseData.feed && data.responseData.feed.entries) {
      $.each(data.responseData.feed.entries, function (i, e) {
        console.log("------------------------");
        console.log("title      : " + e.title);
        console.log("author     : " + e.author);
        console.log("description: " + e.description);
      });
    }
  }
});

打印出來：

------------------------
title      : How to parse a RSS feed using javascript?
author     : Thiru
description: undefined
------------------------
title      : Answer by haylem for How to parse a RSS feed using javascript?
author     : haylem
description: undefined

Answer 2

另一個已棄用（感謝@daylight）選項，對我來說最簡單（這是我用於SpokenToday.info 的）：

不使用 JQuery 的Google Feed API ，只需 2 個步驟：

1. 導入庫：

    <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load("feeds", "1");</script>

2. 查找/加載提要（ 文檔）：

    var feed = new google.feeds.Feed('http://www.google.com/trends/hottrends/atom/feed?pn=p1'); feed.load(function (data) { // Parse data depending on the specified response format, default is JSON. console.dir(data); });

3. 要解析數據，請查看 有關響應格式的文檔。

Answer 3

如果您正在為您的 rss 小部件尋找一個簡單且免費的Google Feed API替代方案，那么rss2json.com可能是一個合適的解決方案。

您可以嘗試查看以下api 文檔中的示例代碼是如何工作的：

 google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("https://news.ycombinator.com/rss"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize);

 <html> <head> <script src="https://rss2json.com/gfapi.js"></script> </head> <body> <p><b>Result from the API:</b></p> <div id="feed"></div> </body> </html>

Answer 4

對於閱讀本文的其他人（從 2019 年開始），不幸的是，大多數 JS RSS 閱讀實現現在都不起作用。 首先，Google API 已關閉，因此這不再是一種選擇，並且由於 CORS 安全策略，您現在通常無法跨域請求 RSS 提要。

使用https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) 上的示例，我得到以下信息：

Access to XMLHttpRequest at 'https://feeds.feedburner.com/raymondcamdensblog?format=xml' from origin 'MYSITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是正確的，是最終網站的安全預防措施，但現在確實意味着上述答案不太可能奏效。

我的解決方法可能是通過 PHP 解析 RSS 提要並允許 javascript 訪問我的 PHP，而不是嘗試訪問最終目的地提要本身。

Answer 5

如果你想使用一個普通的 javascript API， https://github.com/hongkiat/js-rss-reader/有一個很好的例子

https://www.hongkiat.com/blog/rss-reader-in-javascript/的完整說明

它使用fetch方法作為異步獲取資源的全局方法。 下面是一段代碼：

fetch(websiteUrl).then((res) => {
  res.text().then((htmlTxt) => {
    var domParser = new DOMParser()
    let doc = domParser.parseFromString(htmlTxt, 'text/html')
    var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
  })
}).catch(() => console.error('Error in fetching the website'))

Answer 6

許多誤導性的文章和答案讓我非常惱火，以至於我編寫了自己的 RSS 閱讀器： https : //gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- to-create-a-rss-reader-in-javascript/

您可以使用 AJAX 請求來獲取 RSS 文件，但當且僅當您使用 CORS 代理時它才會工作。 我將嘗試編寫自己的 CORS 代理，為您提供更強大的解決方案。 同時，它工作正常，我將它部署在我的 Debian Linux 下的服務器上。

我的解決方案不使用 JQuery，我只使用沒有第三方庫的純 Javascript 標准 API，它甚至可以與 Microsoft Internet Explorer 11 一起使用。

Answer 7

您可以使用jquery-rss或Vanilla RSS ，它們帶有漂亮的模板並且非常易於使用：

// Example for jquery.rss
$("#your-div").rss("https://stackoverflow.com/feeds/question/10943544", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// Example for Vanilla RSS
const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "https://stackoverflow.com/feeds/question/10943544",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

有關工作示例，請參閱http://jsfiddle.net/sdepold/ozq2dn9e/1/ 。

Answer 8

現在試圖找到一個好的解決方案，我偶然發現了FeedEk jQuery RSS/ATOM Feed 插件，它在通過 jQuery Feed API解析和顯示 RSS 和 Atom 提要方面做得很好。 對於基本的基於 XML 的 RSS 提要，我發現它的工作原理非常棒，不需要服務器端腳本或其他 CORS 解決方法，它甚至可以在本地運行。