How to parse an RSS feed using JavaScript?

I need to parse an RSS feed (XML version 2.0) and display the parsed details in an HTML page.

188952 次浏览
小开
最佳答案

解析提要

用 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(使用包含元素的 document.createDocumentFragment()(使用 document.createElement()创建)来注入以显示数据。

注入内容

选择您希望在页面上显示的容器元素，并将文档片段附加到该元素，然后只需使用 innerHTML 完全替换其内容。

比如:

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

或:

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

测试数据

使用这个 问题提示，截至本文写作时，它给出:

<?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

Invoking:

$.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);
});
}
}
});

Prints out:

------------------------
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
小开

另一个 不赞成 (感谢@日光)选项，对我来说是最简单的(这是我使用的 Spokentoday.info) :

Google Feed API不使用 JQuery，只有两个步骤:

  1. 导入图书馆:

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

  2. Find/Load feeds (documentation):

    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. To parse data, check documentation about the response format.

小开

如果您正在为您的 rss 小部件寻找一个简单而免费的 Google Feed API替代品，那么 网址: http://rss2json.com/rel = “ nofollow noReferrer”可能是一个合适的解决方案。

你可以试着从下面的 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>

小开

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

The complete description at 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'))
小开

不幸的是，对于其他阅读本文(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，而不是尝试访问最终目的提要本身。

小开

你可以使用 Jquery-rss或者 香草 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/。

小开

Trying to find a good solution for this now, I happened upon the RSS/ATOM Feed 插件 that does a great job of parsing and displaying RSS and Atom feeds via the jQuery 饲料 API. For a basic XML-based RSS feed, I've found it works like a charm and needs no server-side scripts or other CORS workarounds for it to run even locally.

小开

I was so exasperated by many misleading articles and answers that I wrote my own RSS reader: 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，没有第三方库，即使在 Internet Explorer 11中也应该可以工作。

小开

由于 CORS 错误，我没有找到解析 RSS 的解决方案。安装插件对我来说不是一个选项，构建代理也不好玩，我找到的小解决方案也不起作用。

所以，为了以防万一有人正在这里，可以使用服务器端，我发现在 PHP 的 这个解决方案对我来说是完美的！(没有 CORS 错误！“ x 已被 CORS 政策阻止...”)


提交答案