用jQuery解析RSS


194

我想使用jQuery解析RSS feed。可以使用现成的基本jQuery库完成此操作,还是需要使用插件?


1
我会去github.com/sdepold/jquery-rss-现在是最好的选择,有多个选择!:)
Komrath 2012年

对于从Google登陆这里的任何人,我都必须为deviantART缩略图查看器创建类似的内容。美观,简单,易于扩展:adamjamesnaylor.com/2012/11/05/…。请注意,它利用了Google的供稿阅读器,但仅将其转换为JSON。
Adam Naylor

Answers:


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
缓存在哪里?如何删除缓存?
杰格·巴格斯

39
这不是一个好答案。它取决于第三方公司[Google]维护其服务。它没有回答原始问题(“使用jQuery解析RSS”),而是宣传Google。如果Google删除或修改其Ajax API怎么办?您的网站坏了。
Charles Goodwin

11
@CharlesGoodwin Google刚刚删除了此API!developers.google.com/feed/?hl=en
GOTO

185

使用jFeed -jQuery RSS / Atom插件。根据文档,它很简单:

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

2
实际使用情况的任何例子吗?即解析和显示而不是警报。或者是简单的$(“#结果”)追加(feed.title)。
安迪Brudtkuhl

3
注意:下载中包含各种出色的示例
Andy Brudtkuhl,

12
Anirudha,也许您可​​以尝试7-zip?它是免费的开放源代码,并打开各种文件类型,包括tar / gzip。
Nathan Strutz,2009年

100
请注意,该插件的最新版本在Github上可用。
艾伦·H。

3
jFeed似乎不再被积极维护(注释的最后一次更改是2年,并且许多打开的请求似乎被忽略了),并且不适用于jQuery的最新版本。
Thilo

159

对于我们后面讨论的那些人,从1.5开始,jQuery具有内置的xml解析功能,这使得在没有插件或第3方服务的情况下轻松进行此操作非常容易。它具有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错误: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 2014年

16

jFeed在IE中不起作用。

使用zRSSFeed。它在5分钟内工作了吗


2
可以在zazar.net/developers/zrssfeed上找到。自己尝试一下,看看效果如何,看起来很有希望。
thewinchester 2010年

3
顺便说一句,zRssFeed内部使用Google Feed RSS API。因此,如果要自己做HTML布局,则直接查看它会更容易。
Ciantic 2011年

五分钟或更短的时间:)
康斯坦萨

超级酷...唯一的
好处

2
仅供参考,希望使用此插件的任何人。开发人员发布了以下内容。“此插件已停止运行,因为该插件已对其进行了回复,而该服务已从Google Feeds API中删除,它将不再可用或受支持。” 来源:zazar.net/developers/jquery/zrssfeed
phanf

16

更新(2019年10月15日)

我将核心逻辑从jquery-rss提取到一个名为Vanilla RSS的新库中,该库正在使用fetch 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,该API将缓存feed,这可能会出现问题。:您可以通过添加一个垃圾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,而是一种名为Feedr(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>


8

更新 [ 4/25/2016 ]现在更好地编写并完全受支持的版本,具有托管在 GitHub.jQRSS上的更多选项和功能

我看到所选答案弥敦道Strutz,然而,jQuery插件页面链接仍下跌和该网站的主页上似乎没有负载。我尝试了其他一些解决方案,发现其中大多数解决方案不仅过时,而且简单!因此,我把帽子扔了出去,制作了自己的插件,并且这里有死链接,这似乎是提交答案的好地方。如果您在2012年(2013年b左右)寻找此答案,您可能会像我一样注意到这里的无效链接和旧建议。以下是我的现代插件示例以及该插件代码的链接!只需将代码复制到JS文件中,并像其他任何插件一样将其链接到标题中即可。使用是EXTREMELY 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){/ *起作用* /}) // 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是一种可靠且可重复使用的方法,这样做的好处是,您可以获取JSON而不是XML。将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

1
这个对我有用。你测试了吗?可以肯定的是Google使用回调参数而不是ajax dataType返回jsonp。
Dylan Valade 2012年

不知道那票是干什么的。该代码在三年后仍然有效。将所有内容粘贴到控制台中,您将看到当前(XML)滑雪条件添加到此页面的页脚中。
迪伦·瓦拉德

4

jFeed已过时,仅适用于旧版jQuery。自更新以来已经两年了。

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端点,但是如果可以,可能会用feedrapp替换google feed api:github.com/sdepold/feedrapp(这也是jquery的基础
-rss

这不会解析。它使用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>

答案不错,但是不幸的是,您在粘贴代码方面做得不好。;-)
直到2010年

0

使用由Google缓存的google 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很简单,并提供了一个示例供您测试。但是,如果要从另一台服务器解析提要,则需要在提要的服务器上允许跨源资源共享(CORS)。您还需要检查浏览器支持

我上载了示例,但是当我通过http协议将示例中的URL更改为example.com/feed.rss时,仍然没有得到任何版本的IE支持。IE 8及更高版本应支持CORS,但jFeed示例未提供Feed。

最好的选择是使用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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.