jQueryでRSSを解析する


194

jQueryを使用してRSSフィードを解析したいのですが。これは標準のjQueryライブラリですぐに実行できますか、それともプラグインを使用する必要がありますか?


1
私はgithub.com/sdepold/jquery-rssに行きます —これは今のところ最良のオプションであり、複数のオプションが利用可能です!:)
Komrath

グーグルからここに着陸する人のために、逸脱したARTサムネイルビューア用に同様のものを作成する必要がありました。素晴らしくシンプルで簡単に拡張可能:adamjamesnaylor.com/2012/11/05/…。これは、Googleのフィードリーダーを使用しますが、JSONに変換するためだけのものです。
Adam Naylor

回答:


208

警告

Google Feed APIは正式に非推奨になり、動作しなくなりました


プラグイン全体は必要ありません。これは、RSSをJSONオブジェクトとしてコールバック関数に返します。

function parseRSS(url, callback) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      callback(data.responseData.feed);
    }
  });
}

4
jFeedを試してみましたが、機能しませんでした。これは正常に機能し、追加のライブラリを必要としません。
diggersworld 2011

15
注意してください... Google APIを使用すると、フィードがキャッシュされるため、最新かつ最高のフィードを取得できません。
c0deNinja 2011

3
どこにキャッシュされていますか?キャッシュを削除するにはどうすればよいですか?
Jeg Bagus 2011

39
これは良い答えではありません。サービスを維持するサードパーティ企業[Google]に依存しています。元の質問(「Parse RSS with jQuery」)には答えず、代わりにGoogleを宣伝します。Googleがajax APIを削除または変更した場合はどうなりますか?あなたのウェブサイトは壊れます。
Charles Goodwin 2013年

11
@CharlesGoodwin GoogleがこのAPIを削除しました!developers.google.com/feed/?hl=en
後藤

185

jFeed -jQuery RSS / Atomプラグインを使用します。ドキュメントによると、それは次のように簡単です:

jQuery.getFeed({
   url: 'rss.xml',
   success: function(feed) {
      alert(feed.title);
   }
});

2
実際の使用例はありますか?つまり、警告ではなく解析と表示です。それとも$( "#results")。append(feed.title)のように単純ですか
Andy Brudtkuhl、

3
注:ダウンロードにはさまざまな種類の優れた例が含まれています
Andy Brudtkuhl

12
Anirudha、おそらく7-zipを試すことができますか?これは無料のオープンソースで、tar / gzipを含むさまざまなファイルタイプを開きます。
Nathan Strutz、

100
このプラグインの最新バージョンはGithubで入手できます。
アランH.

3
jFeedはもはや積極的に維持されていないようで(最後のメモの変更は2年前で、多くのオープンプルリクエストは無視されているようです)、jQueryの最近のリリースでは機能しません。
Thilo

159

後半の議論に参加する人のために、1.5から始まるjQueryには組み込みのXML解析機能があり、プラグインやサードパーティのサービスなしでこれを簡単に行うことができます。parseXml関数があり、$。get関数を使用するとxmlを自動解析します。例えば:

$.get(rssurl, function(data) {
    var $xml = $(data);
    $xml.find("item").each(function() {
        var $this = $(this),
            item = {
                title: $this.find("title").text(),
                link: $this.find("link").text(),
                description: $this.find("description").text(),
                pubDate: $this.find("pubDate").text(),
                author: $this.find("author").text()
        }
        //Do something with item here...
    });
});

10
XmlHttpRequestエラー:OriginはAccess-Control-Allow-Originでは許可されていません
jackocnr 2012

12
@jackocnr、そうですね、これはこの方法の欠点です。移行元サーバーでAccess-Control-Allow-Originヘッダーを設定するアクセス権がない限り、クロスドメインリクエストを実行できません。サーバーがjsonpをサポートしている場合は、それが最善の策です。それ以外の場合は、ドメイン内のプロキシスクリプトを使用してxmlを取得し、外部サーバーの代わりにそのスクリプトを呼び出すことができます。
デビッドハモンド

これは本当に、外部のプラグインやサービスに依存しない唯一の答えですか?
Blazemonger、2014年

なぜ$this.find("link").text()常に空の文字列 ''を返すのですか?
Jeff Tian

@JeffTian、あなたのxmlを見ずに言うのは難しいです。最も明白な理由は、<link>要素がないか空であることです。
David Hammond

16

jFeedはIEでは機能しません。

zRSSFeedを使用します。5分で機能したか


2
zazar.net/developers/zrssfeedから入手できます。実際に試してみて、どうなるか見てみましょう。
ザウィンチェスター

3
ところで、zRssFeedは内部的にGoogle Feed RSS APIを使用しています。そのため、HTMLレイアウト自体を行いたい場合は、代わりに直接それを参照する方が簡単です。
Ciantic 2011

5分以内:)
コンスタンツァ

非常にクール...コールバック関数でHTML全体ではなくフィードオブジェクトを提供している場合にのみ、それがすばらしいでしょう...
shahil

2
参考までに、このプラグインの使用を検討している人。開発者は以下を投稿しました。「このプラグインは廃止されました。プラグインが応答していたGoogle Feeds APIがサービスから削除されたため、利用できなくなったり、サポートされなくなります。」出典:zazar.net/developers/jquery/zrssfeed
phanf

16

アップデート(2019年10月15日)

コアロジックをjquery-rssから、Vanilla RSSと呼ばれる新しいライブラリに抽出しました。これは、フェッチAPIを使用しており、追加の依存関係なしで機能します。

const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "http://www.recruiter.com/feed/career.xml",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

元の

役職:

jquery-rssを使用することもできます。これには、優れたテンプレートが付属しており、非常に使いやすくなっています。

$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

利回り(2013年9月18日現在):

<div id="your-div">
    <ul class="inline">
    <entries></entries>
    </ul>
    <ul class="inline">
        <li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
        <li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
        <li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
    </ul>
</div>

実際の例については、http://jsfiddle.net/sdepold/ozq2dn9e/1/を参照してください。


jquery-rssはフィードをキャッシュするGoogle Feed APIを使用しているため、問題が発生する可能性があることに注意してください。あなたはかかわらず、ジャンクURLパラメータを追加することによって、それをだますことができます:stackoverflow.com/questions/13401936/...を
kukabuka

使用せずに日付をフォーマットする例を提供してくださいmoment.js
Purvesh Desai 2015

次のスニペットを確認してくださいgist.github.com/sdepold/d1e5e0e7a66fc77930fe これは次のようなものを生成します: "<some content>、[@ 2015-11-18]"
sdepold

jquery-rssはGoogle Feed APIを使用していませんが、Feder(github.com/sdepold/feedrapp)と呼ばれるドロップイン代替品を使用しており、元のAPIがオフになっているにもかかわらず正常に動作することを述べたかっただけです。
sdepold

15

JFeedの使用

function getFeed(sender, uri) {
    jQuery.getFeed({
        url: 'proxy.php?url=' + uri,
        success: function(feed) {
            jQuery(sender).append('<h2>'
            + '<a href="'
            + feed.link
            + '">'
            + feed.title
            + '</a>'
            + '</h2>');

            var html = '';

            for(var i = 0; i < feed.items.length && i < 5; i++) {

                var item = feed.items[i];

                html += '<h3>'
                + '<a href="'
                + item.link
                + '">'
                + item.title
                + '</a>'
                + '</h3>';

                html += '<div class="updated">'
                + item.updated
                + '</div>';

                html += '<div>'
                + item.description
                + '</div>';
            }

            jQuery(sender).append(html);
        }    
    });
}

<div id="getanewbrowser">
  <script type="text/javascript">
    getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
  </script>
</div>

9

RSSデータが非公開でない限り、Google AJAX Feed APIを使用してください。もちろん高速です。

https://developers.google.com/feed/


1
良いアイデアですが、ダイアログボックスを使用したプロキシ認証を必要とするファイアウォールの内側にいる場合は機能しません。
ザウィンチェスター

Googleフィードはサポートが終了し、サポートされなくなりました。
vikas etagi 2017

8

UPDATE [ 2016年4月25日 ] GitHub.jQRSSでホストされるオプションと機能が追加された、より適切に記述され完全にサポートされたバージョン

Nathan StrutzによるSelected Answerを見ましたが、jQueryプラグインページのリンクはまだダウンしており、そのサイトのホームページはロードされていないようです。私は他のいくつかの解決策を試しましたが、それらのほとんどが古くなっているだけでなく、簡単であることがわかりました!したがって、私はそこに帽子を投げて自分のプラグインを作成しました。ここにデッドリンクがあり、これは回答を送信するのに最適な場所のようです。2012年(まもなくb 2013年)にこの回答を探している場合、私が行ったように、リンク切れや古いアドバイスの欲求不満に気付くでしょう。以下は私のモダンなプラグインの例へのリンクとプラグインのコードです!他のプラグインと同じように、コードをJSファイルにコピーしてヘッダーにリンクするだけです。使用は非常にEZです!

jsFiddle

プラグインコード2
/9/2015- consoleコマンドを送信する前にチェックするために長い期限切れの更新を行いました!古いIEの問題に役立つはずです。

(function($) {
    if (!$.jQRSS) { 
        $.extend({  
            jQRSS: function(rss, options, func) {
                if (arguments.length <= 0) return false;

                var str, obj, fun;
                for (i=0;i<arguments.length;i++) {
                    switch(typeof arguments[i]) {
                        case "string":
                            str = arguments[i];
                            break;
                        case "object":
                            obj = arguments[i];
                            break;
                        case "function":
                            fun = arguments[i];
                            break;
                    }
                }

                if (str == null || str == "") {
                    if (!obj['rss']) return false;
                    if (obj.rss == null || obj.rss == "") return false;
                }

                var o = $.extend(true, {}, $.jQRSS.defaults);

                if (typeof obj == "object") {
                    if ($.jQRSS.methods.getObjLength(obj) > 0) {
                        o = $.extend(true, o, obj);
                    }
                }

                if (str != "" && !o.rss) o.rss = str;
                o.rss = escape(o.rss);

                var gURL = $.jQRSS.props.gURL 
                    + $.jQRSS.props.type 
                    + "?v=" + $.jQRSS.props.ver
                    + "&q=" + o.rss
                    + "&callback=" + $.jQRSS.props.callback;

                var ajaxData = {
                        num: o.count,
                        output: o.output,
                    };

                if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
                if (o.userip != null) ajaxData.scoring = o.userip;

                $.ajax({
                    url: gURL,
                    beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
                    dataType: o.output != "xml" ? "json" : "xml",
                    data: ajaxData,
                    type: "GET",
                    xhrFields: { withCredentials: true },
                    error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
                    success: function (data, textStatus, jqXHR) {  
                        var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
                            e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
                        if (window['console']) {
                            console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
                            console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
                            console.log(new Array(70).join('-'));
                        }

                        if (fun) {
                            return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
                        }
                        else {
                            return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
                        }
                    }
                });
            }
        });
        $.jQRSS.props = {
            callback: "?",
            gURL: "http://ajax.googleapis.com/ajax/services/feed/",
            scoring: "h",
            type: "load",
            ver: "1.0"
        };
        $.jQRSS.methods = {
            getObjLength: function(obj) {
                if (typeof obj != "object") return -1;
                var objLength = 0;
                $.each(obj, function(k, v) { objLength++; })
                return objLength;
            }
        };
        $.jQRSS.defaults = {
            count: "10", // max 100, -1 defaults 100
            historical: false,
            output: "json", // json, json_xml, xml
            rss: null,  //  url OR search term like "Official Google Blog"
            userip: null
        };
    }
})(jQuery);

使用する

//  Param ORDER does not matter, however, you must have a link and a callback function
//  link can be passed as "rss" in options
//  $.jQRSS(linkORsearchString, callbackFunction, { options })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ })

$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })

$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })

$ .jQRSS( 'リンクの代わりにここで単語を検索する'、function(feed){/ * do work * /}) // TODO:修正が必要

オプション

{
    count: // default is 10; max is 100. Setting to -1 defaults to 100
    historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache. 
    output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
    rss: // simply an alternate place to put news feed link or search terms
    userip: // as this uses Google API, I'll simply insert there comment on this:
        /*  Reference: https://developers.google.com/feed/v1/jsondevguide
            This argument supplies the IP address of the end-user on 
            whose behalf the request is being made. Google is less 
            likely to mistake requests for abuse when they include 
            userip. In choosing to utilize this parameter, please be 
            sure that you're in compliance with any local laws, 
            including any laws relating to disclosure of personal 
            information being sent.
        */
}

5
(function(url, callback) {
    jQuery.ajax({
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
        dataType: 'json',
        success: function(data) {
            callback(data.responseData.feed);
        }
    });
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
    var entries = feed.entries, feedList = '';
    for (var i = 0; i < entries.length; i++) {
        feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
    }
    jQuery('.feed > ul').append(feedList);
});


<div class="feed">
        <h4>Hacker News</h4>
        <ul></ul>
</div>

5

@Andrewに同意します。Googleを使用することは、XMLの代わりにJSONを取得するという大きな利点を備えた、確実で再利用可能な方法です。Googleをプロキシとして使用することの追加の利点は、データへの直接アクセスをブロックする可能性のあるサービスがGoogleを停止する可能性が低いことです。スキーレポートと状態データを使用した例を次に示します。これには、すべての一般的な実世界のアプリケーションがあります。1)サードパーティのRSS / XML 2)JSONP 3)希望どおりにデータを取得できない場合に配列への文字列と文字列をクリーニングする4)ロード時に要素を追加するDOM。これが一部の人々に役立つことを願っています!

<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">

    function displaySkiReport (feedResponse) {

    // Get ski report content strings
    var itemString = feedResponse.entries[0].content;
    var publishedDate = feedResponse.entries[0].publishedDate;

    // Clean up strings manually as needed
    itemString = itemString.replace("Primary: N/A", "Early Season Conditions"); 
    publishedDate = publishedDate.substring(0,17);

    // Parse ski report data from string
    var itemsArray = itemString.split("/");


    //Build Unordered List
    var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
    html += '<ul>';

    html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
    // Last 48 Hours
    html += '<li>' + itemsArray[1] + '</li>';
    // Snow condition
    html += '<li>' + itemsArray[2] + '</li>';
    // Base depth
    html += '<li>' + itemsArray[3] + '</li>';

    html += '<li>Ski Report Date: ' + publishedDate + '</li>';

    html += '</ul>';

    $('body').append(html);    

    }


    function parseRSS(url, callback) {
      $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      callback(data.responseData.feed);
    }
      });
    }

    $(document).ready(function() {              

        // Ski report
        parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);

    });

</script>

2
クロスドメインの問題のため、これは機能しません。JSONPが必要です。
gotofritz 2012

1
わたしにはできる。テストしましたか?Googleがajax dataTypeではなくコールバックパラメータを使用してjsonpを返すことを確認してください。
Dylan Valade、2012

反対投票の目的がわからない。このコードは3年後も機能します。すべてをコンソールに貼り付けると、このページのフッターに追加された現在の(XML)スキー条件が表示されます。
ディランヴァレード2016年

4

jFeedはやや時代遅れで、古いバージョンのjQueryでのみ機能します。更新してから2年になります。

zRSSFeedはおそらく柔軟性が少し劣りますが、使いやすく、現在のバージョンのjQuery(現在は1.4)で動作します。http://www.zazar.net/developers/zrssfeed/

以下は、zRSSFeedドキュメントの簡単な例です。

<div id="test"><div>

<script type="text/javascript">
$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });
});
</script>

Google Feed APIを使用しているため、これはローカル以外のフィードでのみ機能することに注意してください(Googleはフィードxmlをロードできる必要があります)。
CmdrTallen 2011年


2

FeedEkを使用することをお勧めします。Google Feed APIが正式に廃止された後、ほとんどのプラグインは機能しません。しかしFeedEkはまだ機能しています。それは非常に使いやすく、カスタマイズする多くのオプションがあります。

$('#divRss').FeedEk({
   FeedUrl:'http://jquery-plugins.net/rss'
});

オプション付き

$('#divRss').FeedEk({
  FeedUrl:'http://jquery-plugins.net/rss',
  MaxCount : 5,
  ShowDesc : true,
  ShowPubDate:true,
  DescCharacterLimit:100,
  TitleLinkTarget:'_blank',
  DateFormat: 'MM/DD/YYYY',
  DateFormatLang:'en'
});

実際に代替APIエンドポイントを定義できるかどうかはわかりませんが、可能であれば、GoogleフィードAPIをfeedrapp:github.com/sdepold/feedrapp(jqueryのバックボーンでもある)に置き換える可能性があります。-rss
nowadays

これは解析を行いません。yahooapisを使用して解析を行い、コンテンツを表示するだけです。
David L.

1
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
    function loadFeed(){
        $.getFeed({
            url: 'url=http://sports.espn.go.com/espn/rss/news/',
            success: function(feed) {

                //Title
                $('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');

                //Unordered List
                var html = '<ul>';

                $(feed.items).each(function(){
                    var $item = $(this);

                    //trace( $item.attr("link") );
                    html += '<li>' +
                        '<h3><a href ="' + $item.attr("link") + '" target="_new">' +
                        $item.attr("title") + '</a></h3> ' +
                        '<p>' + $item.attr("description") + '</p>' +
                        // '<p>' + $item.attr("c:date") + '</p>' +
                        '</li>';
                });

                html += '</ul>';

                $('#result').append(html);
            }
        });
    }
</script>

悪い答えではありませんが、残念ながら、コードを貼り付けるのに最も苦労しました。;-)
までの

0

グーグルによってキャッシュされたグーグルAjax APIとあなたが望むどんな出力フォーマットも使用してください。

コードサンプル。 http://code.google.com/apis/ajax/playground/#load_feed

<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
*  How to load a feed via the Feeds API.
*/

google.load("feeds", "1");

// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
  if (!result.error) {
    // Grab the container we will put the results into
    var container = document.getElementById("content");
    container.innerHTML = '';

    // Loop through the feeds, putting the titles onto the page.
    // Check out the result object for a list of properties returned in each entry.
    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
    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);
    }
  }
}

function OnLoad() {
  // Create a feed instance that will grab Digg's feed.
  var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");

  // Calling load sends the request off.  It requires a callback function.
  feed.load(feedLoaded);
}

google.setOnLoadCallback(OnLoad);
</script>

jqueryに依存しないため、これは優れたオプションです。
ピートガードナー



-1

jQuery Feedsは優れたオプションであり、テンプレートシステムが組み込まれており、Google Feed APIを使用しているため、クロスドメインサポートがあります。



-2

jFeedは簡単で、テストするためのがあります。ただし、別のサーバーからのフィードを解析する場合は、フィードのサーバーでCross Origin Resource Sharing(CORS)を許可する必要があります。また、ブラウザのサポート確認する必要があります。

サンプルをアップロードしましが、例のURLをhttpプロトコルを介してexample.com/feed.rssのようなものに変更した場合、どのバージョンでもIEからサポートを受けられませんでした。CORSはIE 8以降でサポートされているはずですが、jFeedの例ではフィードがレンダリングされませんでした。

あなたの最善の策は、GoogleのAPIを使用することです:https :
//developers.google.com/feed/v1/devguide

参照:
https : //github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors

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