Wie analysiere ich einen RSS-Feed mit JavaScript?

116

Ich muss einen RSS-Feed (XML-Version 2.0) analysieren und die analysierten Details auf einer HTML-Seite anzeigen.

Thiru
quelle
12
1) Was genau hast du versucht? 2) Was genau möchten Sie analysieren? (Welche Informationen möchten Sie aus dem Feed extrahieren?) 3) Wo genau soll sie auf Ihrer Seite angezeigt werden? 4) Was genau ist Ihr HTML-Markup? Abgesehen davon geben wir alle gerne vor, David Copperfield zu sein, aber ich bin mir nicht sicher, ob wir das Publikum sehr lange täuschen würden.
Haylem
Nein, ich habe einen sukzessiven Feed bei mir. Ich kann es nicht veröffentlichen. Deshalb habe ich hier eine Probe gestellt
Thiru
ok aber das ist KEINE Probe. Es war nur eine URL zu einer nicht existierenden Seite. In diesem Fall hat meine Antwort eine "Probe". Es ist die Variable FEED_URL. Geben Sie einfach das ein, was Sie brauchen. Wenn Sie weitere Hilfe benötigen, müssen Sie außerdem weitere Details dazu angeben, welche Elemente des Feeds Sie benötigen, wie die HTMK-Stubs aussehen sollen, wo Sie die generierten HTML-Stubs einfügen möchten, und Sie können auch ein echtes Beispiel bereitstellen Ihres RSS-Feeds (kopieren Sie einfach einen Auszug und ersetzen Sie den tatsächlichen Inhalt durch Platzhalter).
Haylem

Antworten:

216

Analysieren des Feeds

Mit jQuery ‚s jFeed

(Empfehlen Sie das nicht wirklich, siehe die anderen Optionen.)

jQuery.getFeed({
   url     : FEED_URL,
   success : function (feed) {
      console.log(feed.title);
      // do more stuff here
   }
});

Mit der integrierten XML-Unterstützung von jQuery

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

Mit jQuery und der 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);
      });
    }
  }
});

Das bedeutet jedoch, dass Sie darauf angewiesen sind, dass sie online und erreichbar sind.


Inhalte erstellen

Sobald Sie die benötigten Informationen erfolgreich aus dem Feed extrahiert haben, können Sie DocumentFragments erstellen (mit document.createDocumentFragment()den Elementen (erstellt mit document.createElement()), die Sie einfügen möchten, um Ihre Daten anzuzeigen.


Injizieren des Inhalts

Wählen Sie das gewünschte Containerelement auf der Seite aus und hängen Sie Ihre Dokumentfragmente daran an. Verwenden Sie einfach innerHTML, um den Inhalt vollständig zu ersetzen.

Etwas wie:

$('#rss-viewer').append(aDocumentFragmentEntry);

oder:

$('#rss-viewer')[0].innerHTML = aDocumentFragmentOfAllEntries.innerHTML;

Testdaten

Verwenden Sie den Feed dieser Frage , der zum jetzigen Zeitpunkt Folgendes enthält:

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

Hinrichtungen

Verwenden der integrierten XML-Unterstützung von jQuery

Aufruf:

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

Druckt aus:

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

Verwenden von jQuery und den Google AJAX-APIs

Aufruf:

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

Druckt aus:

------------------------
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
quelle
1
Vielen Dank für Ihre Antwort Haylem. Aber ich habe keine Ausgabe dafür bekommen. Ist das mit Javascript nicht möglich?
Thiru
1
@Thiru: Ich habe gerade die letzte Methode mit dem RSS-Feed dieser Frage ( stackoverflow.com/feeds/question/10943544 ) ausprobiert und sie hat bei mir gut funktioniert.
Haylem
8
Möglicherweise haben Sie hier das gesamte Arbeitscode-Snippet. Ich bin sicher, Sie können den Rest selbst erledigen.
Haylem
2
@Timmy: was machen? Bist du ein Freund von Thiru? Sie haben ähnliche Techniken zur Problemberichterstattung. Ich habe gerade die letzten 2 Codefragmente in meine Konsole kopiert und ausgeführt und die Ausgaben wie erwartet erhalten. Was haben Sie wie für welche Ressource getan?
Haylem
2
Google AJAX-APIs sind veraltet. Es ist seit Januar 2017 nicht mehr verfügbar.
Ezee
39

Eine weitere veraltete Option (dank @daylight) , die für mich am einfachsten ist (diese verwende ich für SpokenToday.info ):

Die Google Feed API ohne Verwendung von JQuery und mit nur 2 Schritten:

  1. Importieren Sie die Bibliothek:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Feeds suchen / laden ( Dokumentation ):

    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. Überprüfen Sie zum Analysieren von Daten die Dokumentation zum Antwortformat .

Nahuel Barrios
quelle
5
Google sagt: Diese API ist offiziell veraltet.
23
Die Google Feed-API ist veraltet und funktioniert ab dem 02.12.2015 nicht mehr. Bummer
raddevus
Können Sie basierend auf diesem Code eine Eingabeaufforderung zur Eingabe der Feed-URL hinzufügen und die Eigenschaft dann mit einem Wert verketten, um den gewünschten RSS-Feed zu analysieren? Wenn ich zum Beispiel mit mehreren Bildern zu tun hatte, konnte ich die Zeichenfolge und den Wert verketten:document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja
2
Google AJAX-APIs sind veraltet. Es ist nicht verfügbar seit Jan 2017
Ezee
7
Kennt jemand eine geeignete Alternative, nachdem die Googles-API nicht verfügbar ist?
Duellsy
3

Wenn Sie nach einer einfachen und kostenlosen Alternative zur Google Feed-API für Ihr RSS-Widget suchen, ist rss2json.com möglicherweise eine geeignete Lösung dafür.

Sie können versuchen, anhand der folgenden API-Dokumentation zu sehen, wie es mit einem Beispielcode funktioniert :

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>

Chetabahana
quelle
3

Für alle anderen, die dies lesen (ab 2019), funktionieren die meisten JS RSS-Leseimplementierungen leider nicht. Erstens wurde die Google-API heruntergefahren, sodass dies keine Option mehr ist. Aufgrund der CORS-Sicherheitsrichtlinie können Sie RSS-Feeds jetzt im Allgemeinen nicht domänenübergreifend anfordern.

Anhand des Beispiels unter https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) erhalte ich Folgendes:

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.

Dies ist korrekt und stellt eine Sicherheitsmaßnahme für die End-Website dar. Dies bedeutet jedoch, dass die obigen Antworten wahrscheinlich nicht funktionieren.

Meine Problemumgehung wird wahrscheinlich darin bestehen, den RSS-Feed über PHP zu analysieren und dem Javascript den Zugriff auf mein PHP zu ermöglichen, anstatt zu versuchen, auf den Endziel-Feed selbst zuzugreifen.

Ukuser32
quelle
1

Wenn Sie eine einfache Javascript-API verwenden möchten, finden Sie ein gutes Beispiel unter https://github.com/hongkiat/js-rss-reader/.

Die vollständige Beschreibung finden Sie unter https://www.hongkiat.com/blog/rss-reader-in-javascript/

Es verwendet die fetchMethode als globale Methode, die eine Ressource asynchron abruft. Unten ist ein Code-Snap:

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'))
Alireza Fattahi
quelle
Das Beispiel in dem Artikel, den Sie zitieren, funktioniert nicht so wie es ist. Sie müssen die Zeilen 15 und 26 in rss.js ändern, damit ein CORS-Proxy funktioniert. Wenn Sie dies nicht tun, werden aufgrund der Richtlinie für denselben Ursprung einige Fehler angezeigt: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… Außerdem funktioniert die Abruf-API nicht Microsoft Internet Explorer 11, verwenden Sie lieber XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Ich habe diesen Quellcode auf meinem eigenen Server verwendet. Ich empfehle Ihnen, vor dem Posten einige Zeit mit der Durchführung einiger Überprüfungen zu verbringen.
Gouessej
Das CORS-Problem hat mit dieser Antwort nichts zu tun. Bitte lesen Sie den von Ihnen erwähnten CORS-Link oder einige andere Ressourcen zur Behebung des CORS-Problems stackoverflow.com/questions/10636611/… erneut .
Alireza Fattahi
Nein, das CORS-Problem hängt mit Ihrer Antwort zusammen. Das Beispiel in dem von Ihnen zitierten Artikel kann nicht unverändert verwendet werden, und es liegt offensichtlich an den Hosts, diese Header festzulegen. Es kann nicht auf der Clientseite behoben werden. Die einzige Problemumgehung besteht in der Verwendung eines CORS-Proxys. Haben Sie jemals den in diesem Artikel erwähnten Quellcode ausprobiert?
Gouessej
Natürlich verwenden wir es problemlos in einer mobilen Hybrid-App.
Alireza Fattahi
Ein Mozilla-Mitarbeiter, der eine Frage zu meiner Verwendung dieses Quellcodes in meinem eigenen Projekt geschlossen hat, hat mir empfohlen, einen CORS-Proxy zu verwenden. Es kann auf der Serverseite funktionieren, möglicherweise in Node.JS, aber es kann nicht wie auf der Clientseite funktionieren. Ich bin nicht die einzige Person, die dieses Problem mit diesem Quellcode hatte, und ich habe einige Kommentare in einem ähnlichen Artikel über CSS-Tricks gesehen: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Sie befinden sich in einem ganz bestimmten Fall.
Gouessej
0

Sie können jquery-rss oder Vanilla RSS verwenden , das mit schönen Vorlagen geliefert wird und super einfach zu bedienen ist:

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

Ein funktionierendes Beispiel finden Sie unter http://jsfiddle.net/sdepold/ozq2dn9e/1/ .

sdepold
quelle
0

Als ich jetzt versuchte, eine gute Lösung dafür zu finden, stieß ich auf das FeedEk jQuery RSS / ATOM-Feed-Plugin , das RSS- und Atom-Feeds über die jQuery- Feed-API hervorragend analysiert und anzeigt . Ich habe festgestellt, dass ein grundlegender XML-basierter RSS-Feed wie ein Zauber funktioniert und keine serverseitigen Skripte oder andere CORS-Problemumgehungen benötigt, damit er auch lokal ausgeführt werden kann.

Jimiayler
quelle
0

Ich war so verärgert über viele irreführende Artikel und Antworten, dass ich meinen eigenen RSS-Reader schrieb: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- einen RSS-Reader in Javascript erstellen /

Sie können AJAX-Anforderungen zum Abrufen der RSS-Dateien verwenden, dies funktioniert jedoch nur dann, wenn Sie einen CORS-Proxy verwenden. Ich werde versuchen, meinen eigenen CORS-Proxy zu schreiben, um Ihnen eine robustere Lösung zu bieten. In der Zwischenzeit funktioniert es, ich habe es auf meinem Server unter Debian Linux bereitgestellt.

Meine Lösung verwendet kein JQuery, ich verwende nur einfache Javascript-Standard-APIs ohne Bibliotheken von Drittanbietern und es soll sogar mit Microsoft Internet Explorer 11 funktionieren.

gouessej
quelle