jQuery로 RSS 구문 분석

jQuery로 RSS 구문 분석

저는 jQuery를 사용하여 RSS 피드를 파싱하고 싶습니다.기본 jQuery 라이브러리를 즉시 사용할 수 있습니까? 아니면 플러그인을 사용해야 합니까?

경고문

Google 피드 API가 공식적으로 사용되지 않으며 더 이상 작동하지 않습니다!

---

플러그인 전체가 필요 없습니다.그러면 JSON 개체로서의 RSS가 콜백 함수로 돌아갑니다.

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

jFeed - a jQuery RSS/Atom 플러그인을 사용합니다.문서에 따르면 다음과 같이 간단합니다.

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

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

IE에서는 jFeed가 작동하지 않습니다.

zRSSFeed를 사용합니다.5분 안에 작동했습니다.

업데이트 (2019년 10월 15일)

jquery-rs에서 fetch API를 사용하는 Vanilla RSS라는 새로운 라이브러리로 핵심 로직을 추출했습니다.

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-rs를 사용할 수 있는데, 이는 멋진 템플릿과 함께 제공되며 사용하기 매우 쉽습니다.

$("#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/ 을 참조하십시오.

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>

RSS 데이터가 비공개가 아닌 경우 Google AJAX Feed API를 사용합니다.물론 빠릅니다.

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

업데이트 [4/25/2016] GitHub.jQRSS에서 호스팅되는 더 많은 옵션과 기능을 통해 더 나은 작성 및 완벽하게 지원되는 버전

Nathan Strutz의 Selected Answer를 보았지만, jQuery Plugin 페이지 링크가 여전히 다운되어 있고 해당 사이트의 홈페이지가 로드되지 않는 것 같습니다.저는 몇 가지 다른 솔루션을 시도해 보았는데, 대부분의 솔루션이 구식일 뿐만 아니라 쉽다는 것을 발견했습니다!그래서 저는 제 모자를 밖으로 던져 플러그인을 만들었고, 여기 링크가 끊어져 있어서, 여기는 답변을 제출하기에 좋은 장소인 것 같습니다.2012년(곧 2013년)에 이 답을 찾는다면, 저처럼 여기에 데드 링크와 오래된 조언이 좌절감을 느낄 수 있을 것입니다.아래는 나의 현대 플러그인 예제에 대한 링크와 플러그인에 대한 코드입니다!다른 플러그인처럼 코드를 JS 파일에 복사하고 헤더에 링크하기만 하면 됩니다.사용은 극도로 이지적입니다!

jsFiddle

플러그인 코드
_{2015년 2월 9일 - 확인해야 할 기한이 오래 지난 업데이트를 했습니다.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('링크 대신 단어 검색', 함수(피드) {/* 작동 */ })// 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.
        */
}

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

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

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>

저는 yql과 함께 jquery를 피드에 사용하고 있습니다.yql로 twitter, rss, buzz를 검색할 수 있습니다.저는 http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ 에서 읽었습니다.그것은 저에게 매우 유용합니다.

FeedEk을 사용하는 것이 좋습니다.구글 피드 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'
});

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

구글과 원하는 출력 형식으로 캐시된 구글 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>

zRSsfeed는 jQuery를 기반으로 만들어졌으며 심플한 테마가 멋집니다.
한번 해보라구요.

jQuery-rs 프로젝트는 꽤 가볍고 특정한 스타일링을 강요하지 않습니다.

구문은 다음과 같이 간단할 수 있습니다.

$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")

http://jsfiddle.net/jhfrench/AFHfn/ 에서 사용 사례를 참조하십시오.

jQuery Feeds는 좋은 옵션입니다. 템플릿 시스템이 내장되어 있고 Google Feed API를 사용하므로 교차 도메인을 지원합니다.

Superfeeder는 jquery 플러그인을 가지고 있어서 그것을 매우 잘 합니다.Cross Origin Policy 문제가 발생하지 않고 업데이트가 실시간으로 전파됩니다.

jFeed는 쉽고 테스트할 수 있는 예제가 있습니다.그러나 다른 서버의 피드를 구문 분석하려면 피드의 서버에서 CORS(Cross Origin Resource Sharing)를 허용해야 합니다.브라우저 지원 여부도 확인해야 합니다.

샘플을 업로드했지만 http protocol을 통해 예제의 url을 example.com/feed.rss 와 같은 것으로 변경했을 때 어떤 버전에서도 IE의 지원을 받지 못했습니다.IE 8 이상의 경우 CORS가 지원되어야 하지만 jFeed 예제에서는 피드를 렌더링하지 않았습니다.

구글의 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

언급URL : https://stackoverflow.com/questions/226663/parse-rss-with-jquery