JavaScriptを使用してRSSフィードを解析する方法は?


116

RSSフィード(XMLバージョン2.0)を解析し、解析した詳細をHTMLページに表示する必要があります。


12
1)を試しましたか?2)正確に何を解析したいですか?(フィードからどの情報を抽出しますか?)3)ページのどこに表示しますか?4)HTMLマークアップは正確にですか?それがなければ、私たちは皆、私たちがデビッド・コッパーフィールドであると偽りたいのですが、私は観客を非常に長い間だましていたとは思いません。
ヘイレム

いいえ、連続してフィードを持っています。公開できません。そのため、ここにサンプルを配置しました
Thiru

わかりましたが、それはサンプルではありません。それは存在しないページへの単なるURLでした。その場合、私の答えには「サンプル」があります。FEED_URL変数です。そこに必要なものを入れてください。さらにヘルプが必要な場合は、フィードのどの要素が必要か、HTMKスタブの外観をどのようにするか、生成されたHTMLスタブを挿入する場所についての詳細を提供する必要があります。また、実際のサンプルを提供することもできます。 RSSフィード(抜粋をコピーして実際のコンテンツをプレースホルダーに置き換えるだけです)。
ヘイレム2012年

回答:


216

フィードの解析

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フィード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);
      });
    }
  }
});

しかし、それは彼らがオンラインで到達可能であることを尊敬していることを意味します。


コンテンツの構築

フィードから必要な情報を正常に抽出したら、データを表示するために挿入するを作成します(で作成した要素DocumentFragmentdocument.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="/programming/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="/programming/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

1
あなたの答えのヘイレムをありがとう。しかし、これに関する出力はありませんでした。JavaScriptでOTは可能ですか?
Thiru

1
@ティル:この質問のRSSフィード(stackoverflow.com/feeds/question/10943544)を使用して最後の方法を試したところ、うまくいきました。
ヘイレム2012年

8
あなたはここで完全な作業コードスニペットを持っているかもしれません。残りは自分で解決できると思います。
ヘイレム2012年

2
@ティミー:何をしているの?ティルの友達ですか?同様の問題報告手法があります。最後の2つのコードスニペットをコンソールにコピーアンドペーストして実行し、期待どおりの出力を得ました。どのリソースに対して、どのように、どのように、何をしましたか?
ヘイレム2014年

2
Google AJAX APIは非推奨です。2017年1月以降はご利用いただけません
。– Ezee

39

別の非推奨 (@daylightのおかげで)オプションであり、私にとって最も簡単なオプション(これは、SpokenToday.infoに使用しているものです))。

JQueryを使用せず、2つのステップのみのGoogle Feed API

  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. データを解析するには、応答形式に関するドキュメントを確認してください。


5
グーグルは言う:このAPIは正式に廃止予定です。

23
Google Feed APIは非推奨になり、2015年12月2日をもって機能しなくなります。がっかり
raddevus

そのコードに基づいて、フィードのURLを入力するためのプロンプトを追加し、必要なRSSフィードを解析するためにプロパティを連結して値を含めることができますか?:私は複数の画像を扱っていた場合、たとえば、私は、文字列や値連結可能性document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja

2
Google AJAX APIは非推奨です。2017
Ezee

7
GoogleのAPIがダウンした今、適切な代替案を知っている人はいますか?
デュエルシー2017年

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>


3

これを読んでいる他の人(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.

これは正しいものであり、エンドWebサイトによるセキュリティ対策ですが、上記の回答が機能しない可能性があることを意味します。

私の回避策はおそらく、PHPを介してRSSフィードを解析し、JavaScriptが最終宛先のフィード自体にアクセスするのではなく、PHPにアクセスできるようにすることです。


1

プレーンなJavaScript APIを使用したい場合は、https://github.com/hongkiat/js-rss-reader/に良い例があります。

完全な説明は https://www.hongkiat.com/blog/rss-reader-in-javascript/

これはfetch、リソースを非同期的にフェッチするグローバルメソッドとしてmethodを使用します。以下はコードのスナップです:

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'))

引用した記事の例は、そのままでは機能しません。CORSプロキシを使用して機能させるには、rss.jsの15行目と26行目を変更する必要があります。そうしないと、同一生成元ポリシーのためにいくつかのエラーが発生します: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私は自分のサーバー上でこのソースコードを使用していました。投稿する前に、いくつかのチェックに時間をかけることをお勧めします。
gouessej

CORSの問題はこの回答とは関係ありません。あなたが言及したCORSリンク、またはCORSの問題の解決に関する他のリソースをもう一度お読みください stackoverflow.com/questions/10636611/…
Alireza Fattahi

CORSの問題はあなたの回答に関連していません。あなたが引用した記事の例はそのままでは使用できず、明らかにそれらのヘッダーを設定するのはホスト次第です。クライアント側で修正することはできません。唯一の回避策はCORSプロキシを使用することです。この記事で言及したソースコードを試したことがありますか?
gouessej

もちろん、ハイブリッドモバイルアプリでも問題なく使用しています。
Alireza Fattahi

自分のプロジェクトでのこのソースコードの使用に関する私の質問を閉じたMozillaの寄稿者から、CORSプロキシを使用するよう勧められました。サーバー側、おそらくNode.JSで機能しますが、クライアント側ではそのままでは機能しません。このソースコードでこの問題が発生したのは私だけではありません。css-tricksに関する同様の記事でいくつかのコメントを見ました。。css。css tricks.com how to fetch and parse rss feeds in -javascript /…非常に特殊なケースです。
gouessej

0

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/を参照してください。


0

ここで良い解決策を見つけようとしたところ、私はFeedEk jQuery RSS / ATOMフィードプラグインを見つけました。このプラグインは、jQuery Feed APIを介してRSSフィードとAtomフィードを解析および表示するという優れた機能を果たします。基本的なXMLベースのRSSフィードの場合、これは魅力的に機能し、サーバー側のスクリプトや他のCORSの回避策を必要とせず、ローカルでも実行できます。


0

多くの誤解を招く記事と回答に腹を立て、自分の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でも動作するはずです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.