如何使用 JavaScript 解析 RSS 提要？
Posted
技术标签:
【中文标题】如何使用 JavaScript 解析 RSS 提要？【英文标题】：How to parse an RSS feed using JavaScript? 【发布时间】：2012-06-12 04:48:02 【问题描述】：我需要解析一个 RSS 提要（XML 版本 2.0）并在 html 页面中显示解析的详细信息。
【问题讨论】：
1) 究竟是什么你试过了吗？ 2) 究竟要解析什么？ （您想从提要中提取哪些信息？） 3) 您希望它在页面中的确切位置显示？ 4) 究竟是什么 您的 HTML 标记是什么？除此之外，我们都喜欢假装自己是大卫科波菲尔，但我不确定我们是否会欺骗观众很长时间。 不，我有一个连续的提要。我不能发布它。这就是为什么我在这里放一个样本 好的，但这不是示例。它只是一个不存在的页面的 URL。在那种情况下，我的答案有一个“样本”。它是 FEED_URL 变量。把你需要的东西放在那里。如果您需要更多帮助，您还需要提供更多详细信息，说明您需要哪些提要元素、您希望 HTMK 存根看起来像什么、您希望在哪里注入生成的 HTML 存根，您还可以提供一个真实示例您的 RSS 提要（只需复制一段摘录并用占位符替换实际内容）。 【参考方案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);
);
);
但这意味着您依赖他们在线和可访问。
构建内容
从提要中成功提取所需信息后，您可以创建DocumentFragments（使用document.createDocumentFragment()，其中包含您要注入的元素（使用document.createElement() 创建）以显示您的数据。
注入内容
在页面上选择您想要的容器元素并将您的文档片段附加到它，然后简单地使用 innerHTML 来完全替换其内容。
类似：
$('#rss-viewer').append(aDocumentFragmentEntry);
或：
$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;
测试数据
使用此question's 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://***.com/feeds/question/10943544" type="application/atom+xml" />
<link rel="hub" href="http://pubsubhubbub.appspot.com/" />
<link rel="alternate" href="https://***.com/q/10943544" type="text/html" />
<subtitle>most recent 30 from ***.com</subtitle>
<updated>2012-06-08T06:36:47Z</updated>
<id>https://***.com/feeds/question/10943544</id>
<creativeCommons:license>http://www.creativecommons.org/licenses/by-sa/3.0/rdf</creativeCommons:license>
<entry>
<id>https://***.com/q/10943544</id>
<re:rank scheme="http://***.com">2</re:rank>
<title type="text">How to parse a RSS feed using javascript?</title>
<category scheme="https://***.com/feeds/question/10943544/tags" term="javascript"/><category scheme="https://***.com/feeds/question/10943544/tags" term="html5"/><category scheme="https://***.com/feeds/question/10943544/tags" term="jquery-mobile"/>
<author>
<name>Thiru</name>
<uri>https://***.com/users/1126255</uri>
</author>
<link rel="alternate" href="https://***.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">
<p>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't know whether it is possible or not. If any one knows please help me on this. Thanks in advance.</p>
</summary>
</entry>
<entry>
<id>https://***.com/questions/10943544/-/10943610#10943610</id>
<re:rank scheme="http://***.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://***.com/users/453590</uri>
</author>
<link rel="alternate" href="https://***.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"><h1>Parsing the Feed</h1>
<h3>With jQuery's jFeed</h3>
<p>Try this, with the <a href="http://plugins.jquery.com/project/jFeed" rel="nofollow">jFeed</a> <a href="http://www.jquery.com/" rel="nofollow">jQuery</a> plug-in</p>
<pre><code>jQuery.getFeed(
url : FEED_URL,
success : function (feed)
console.log(feed.title);
// do more stuff here
);
</code></pre>
<h3>With jQuery's Built-in XML Support</h3>
<pre><code>$.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());
);
);
</code></pre>
<h3>With jQuery and the Google AJAX APIs</h3>
<p>Otherwise, <a href="https://developers.google.com/feed/" rel="nofollow">Google's AJAX Feed API</a> allows you to get the feed as a JSON object:</p>
<pre><code>$.ajax(
url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=10&amp;callback=?&amp;q=' + encodeURIComponent(FEED_URL),
dataType : 'json',
success : function (data)
if (data.responseData.feed &amp;&amp; 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);
);
);
</code></pre>
<p>But that means you're relient on them being online and reachable.</p>
<hr>
<h1>Building Content</h1>
<p>Once you've successfully extracted the information you need from the feed, you need to create document fragments containing the elements you'll want to inject to display your data.</p>
<hr>
<h1>Injecting the content</h1>
<p>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.</p>
</summary>
</entry></feed>
执行
使用 jQuery 的内置 XML 支持
调用：
$.get('https://***.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://***.com/users/1126255
description:
------------------------
title : Answer by haylem for How to parse a RSS feed using javascript?
author :
haylem
https://***.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://***.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
【讨论】：
感谢您的回答 haylem。但我没有得到这个输出。用javascript不可能吗？ @Thiru：我刚刚用这个问题的 RSS 提要 (***.com/feeds/question/10943544) 尝试了最后一种方法，对我来说效果很好。 这里可能有完整的工作代码 sn-p。我相信你可以自己解决剩下的问题。 @Timmy：在做什么？你是蒂鲁的朋友吗？您有类似的问题报告技术。我只是将最后 2 个代码 sn-ps 复制粘贴到我的控制台中并运行它们并按预期得到输出。你做了什么，怎么做的，为了什么资源？ Google AJAX API 已弃用。它自 2017 年 1 月起不再可用。【参考方案2】：另一个弃用 （感谢@daylight）选项，对我来说最简单（这是我用于SpokenToday.info的选项）：
Google Feed API 不使用 JQuery，只需 2 个步骤：
导入库：
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("feeds", "1");</script>
查找/加载提要 (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);
);
要解析数据，请查看documentation about the response format。
【讨论】：
Google 说：此 API 已正式弃用。 Google Feed API 已弃用，自 2015 年 12 月 2 日起不再工作。无赖 基于该代码，您能否添加输入提要 url 的提示，然后连接属性以包含一个值以解析您想要的任何 rss 提要？例如，如果我正在处理多个图像，我可以连接字符串和值：document.getElementById('image').style.backgroundImage = "url('" + src + "')";
Google AJAX API 已弃用。自 2017 年 1 月起不可用
既然 Google 的 API 已关闭，有人知道合适的替代方案吗？【参考方案3】：
如果您正在为您的 rss 小部件寻找 Google Feed API 的简单且免费的替代品，那么 rss2json.com 可能是一个合适的解决方案。
您可以尝试从下面的 api documentation 中查看它的示例代码是如何工作的：
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>【讨论】：
【参考方案4】：如果你想使用纯 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'))
【讨论】：
您引用的文章中的示例不能按原样工作。您需要修改 rss.js 中的第 15 和 26 行以使用 CORS 代理使其工作。如果你不这样做，你会因为同源策略而得到一些错误：developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… 此外，获取 API 在 Microsoft Internet Explorer 11 中不起作用，而是使用 XMLHTTPRequest：developer.microsoft.com/en-us/microsoft-edge/status/fetchapi 我使用了这个源代码我自己的服务器。我鼓励您在发布之前花一些时间进行一些检查。 CORS 问题与此答案无关。请重新阅读您提到的 CORS 链接或其他有关修复 CORS 问题的资源***.com/questions/10636611/…。 不，CORS 问题与您的答案有关。您引用的文章中的示例不能按原样使用，显然由主机来设置这些标头，它不能在客户端修复，唯一的解决方法是使用 CORS 代理。你试过本文提到的源代码吗？ 当然，我们在混合移动应用中使用它没有任何问题。 一位 Mozilla 贡献者关闭了我关于我在自己的项目中使用此源代码的问题，他建议我使用 CORS 代理。它可以在服务器端工作，也许在 Node.JS 中，但它不能像在客户端那样工作。我不是唯一一个对这个源代码有这个问题的人，我在一篇关于 css-tricks 的类似文章中看到了一些 cmets：css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/… 你的情况非常特殊。【参考方案5】：不幸的是，对于其他阅读本文的人（从 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，而不是尝试访问最终目标提要本身。
【讨论】：
【参考方案6】：您可以使用jquery-rss 或Vanilla RSS，它带有漂亮的模板并且非常易于使用：
// Example for jquery.rss
$("#your-div").rss("https://***.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://***.com/feeds/question/10943544",
// options go here
);
rss.render().then(() =>
console.log('Everything is loaded and rendered');
);
有关工作示例，请参阅 http://jsfiddle.net/sdepold/ozq2dn9e/1/。
【讨论】：
【参考方案7】：现在试图找到一个好的解决方案，我偶然发现了 FeedEk jQuery RSS/ATOM Feed Plugin，它通过 jQuery Feed API 解析和显示 RSS 和 Atom 提要做得很好。对于一个基本的基于 XML 的 RSS 提要，我发现它就像一个魅力，不需要服务器端脚本或其他 CORS 变通方法，它甚至可以在本地运行。
【讨论】：
【参考方案8】：我被许多误导性的文章和答案激怒了，我编写了自己的 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 一起使用。
【讨论】：
【参考方案9】：由于我不断收到 CORS 错误，我没有找到仅使用 js 解析 RSS 的解决方案。安装插件对我来说不是一个选项，构建代理也不好玩，我发现的小解决方案也不起作用。
因此，以防万一有人来到这里并可以使用服务器端，我发现 PHP 中的 this solution 非常适合我！ （没有 CORS 错误！“x 已被 CORS 策略阻止...”）
【讨论】：
以上是关于如何使用 JavaScript 解析 RSS 提要？的主要内容，如果未能解决你的问题，请参考以下文章