Comment analyser un flux RSS en utilisant JavaScript?


116

J'ai besoin d'analyser un flux RSS (XML version 2.0) et d'afficher les détails analysés dans une page HTML.


12
1) Qu'avez -vous essayé exactement ? 2) Que voulez-vous analyser exactement ? (quelles informations souhaitez-vous extraire du flux?) 3) voulez-vous qu'elles s'affichent exactement dans votre page? 4) Quel est exactement votre balisage HTML? À part ça, nous aimons tous prétendre que nous sommes David Copperfield, mais je ne suis pas sûr que nous tromperions le public très longtemps.
haylem

Non, j'ai un flux successif avec moi. Je ne peux pas le publier. C'est pourquoi j'ai mis un échantillon ici
Thiru

ok mais ce n'est PAS un échantillon. C'était juste une URL vers une page inexistante. Dans ce cas, ma réponse a un "échantillon". C'est la variable FEED_URL. Mettez simplement ce dont vous avez besoin. Si vous avez besoin de plus d'aide, vous devez également donner plus de détails sur les éléments du flux dont vous avez besoin, à quoi vous voulez que les stubs HTMK ressemblent, où vous souhaitez injecter les stubs HTML générés, et vous pouvez également fournir un véritable échantillon de votre flux RSS (copiez simplement un extrait et remplacez le contenu réel par des espaces réservés).
haylem

Réponses:


216

Analyse du flux

Avec jQuery de jFeed

(Ne recommande pas vraiment celui-là, voir les autres options.)

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

Avec la prise en charge XML intégrée de 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());
    });
});

Avec jQuery et l' API Google AJAX Feed

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

Mais cela signifie que vous comptez sur leur connexion et leur accessibilité.


Contenu du bâtiment

Une fois que vous avez extrait avec succès les informations dont vous avez besoin du flux, vous pouvez créer des DocumentFragments ( document.createDocumentFragment()contenant les éléments (créés avec document.createElement()) que vous souhaitez injecter pour afficher vos données.


Injecter le contenu

Sélectionnez l'élément conteneur que vous souhaitez sur la page et ajoutez-y les fragments de votre document, puis utilisez simplement innerHTML pour remplacer entièrement son contenu.

Quelque chose comme:

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

ou:

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

Données de test

En utilisant le fil de cette question , qui à ce jour donne:

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

Exécutions

Utilisation de la prise en charge XML intégrée de jQuery

Invoquer:

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

Imprime:

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

Utilisation de jQuery et des API Google AJAX

Invoquer:

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

Imprime:

------------------------
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
Merci pour votre réponse haylem. Mais je n'ai pas obtenu de sortie pour cela. N'est-ce pas possible avec javascript?
Jeudi

1
@Thiru: J'ai juste essayé la dernière méthode avec le flux RSS de cette question ( stackoverflow.com/feeds/question/10943544 ) et cela a bien fonctionné pour moi.
haylem

8
Vous avez peut-être un extrait de code de travail complet ici. Je suis sûr que vous pouvez vous débrouiller tout seul.
haylem

2
@Timmy: faire quoi? Êtes-vous un ami de Thiru? Vous avez des techniques de signalement de problèmes similaires. Je viens de copier-coller les 2 derniers extraits de code dans ma console, je les ai exécutés et j'ai obtenu les sorties comme prévu. Qu'as-tu fait, comment, pour quelle ressource?
haylem le

2
Les API Google AJAX sont obsolètes. Elle n'est plus disponible depuis janvier 2017.
Ezee

39

Une autre option obsolète (grâce à @daylight) , et la plus simple pour moi (c'est ce que j'utilise pour SpokenToday.info ):

L' API Google Feed sans utiliser JQuery et en seulement 2 étapes:

  1. Importez la bibliothèque:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Rechercher / charger des flux ( documentation ):

    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. Pour analyser les données, consultez la documentation sur le format de réponse .


5
Google dit: Cette API est officiellement obsolète.

23
L'API Google Feed est obsolète et ne fonctionne plus depuis le 12/02/2015. Bummer
raddevus

basé sur ce code, pourriez-vous ajouter une invite pour entrer l'URL du flux, puis concaténer la propriété pour inclure une valeur afin d'analyser le flux rss que vous vouliez? par exemple, si je document.getElementById('image').style.backgroundImage = "url('" + src + "')";
traitais

2
Les API Google AJAX sont obsolètes. Elle n'est pas disponible depuis Jan 2017
Ezee

7
Quelqu'un connaît-il une alternative appropriée maintenant que l'API Googles est en panne?
duellsy

3

Si vous recherchez une alternative simple et gratuite à l' API Google Feed pour votre widget rss, rss2json.com pourrait être une solution appropriée pour cela.

Vous pouvez essayer de voir comment cela fonctionne sur un exemple de code de la documentation de l' API ci-dessous:

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

Pour tous ceux qui lisent ceci (à partir de 2019), malheureusement, la plupart des implémentations de lecture JS RSS ne fonctionnent pas maintenant. Premièrement, l'API Google s'est arrêtée, ce n'est donc plus une option et en raison de la politique de sécurité CORS, vous ne pouvez généralement pas demander de flux RSS entre domaines.

En utilisant l'exemple sur https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015), j'obtiens ce qui suit:

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.

Ceci est correct et constitue une précaution de sécurité par le site Web final, mais cela signifie maintenant que les réponses ci-dessus ne fonctionneront probablement pas.

Ma solution de contournement sera probablement d'analyser le flux RSS via PHP et de permettre au javascript d'accéder à mon PHP plutôt que d'essayer d'accéder au flux de destination finale lui-même.


1

Si vous souhaitez utiliser une API javascript simple, il existe un bon exemple sur https://github.com/hongkiat/js-rss-reader/

La description complète sur https://www.hongkiat.com/blog/rss-reader-in-javascript/

Il utilise la fetchméthode comme méthode globale qui récupère une ressource de manière asynchrone. Voici un aperçu du code:

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

L'exemple de l'article que vous citez ne fonctionne pas tel quel. Vous devez modifier les lignes 15 et 26 dans rss.js pour utiliser un proxy CORS pour le faire fonctionner. Sinon, vous obtiendrez des erreurs à cause de la politique de même origine: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/... De plus, l'API de récupération ne fonctionne pas dans Microsoft Internet Explorer 11, utilisez plutôt XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi J'ai utilisé ce code source sur mon propre serveur. Je vous encourage à passer du temps à effectuer certaines vérifications avant de poster.
gouessej le

Le problème CORS n'est pas lié à cette réponse. Veuillez relire le lien CORS que vous avez mentionné ou d'autres ressources sur la résolution du problème CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi

Non, le problème CORS n'est pas lié à votre réponse. L'exemple de l'article que vous avez cité ne peut pas être utilisé tel quel et évidemment c'est aux hôtes de définir ces en-têtes, il ne peut pas être corrigé côté client, la seule solution de contournement consiste à utiliser un proxy CORS. Avez-vous déjà essayé le code source mentionné dans cet article?
gouessej

Bien sûr, nous l'utilisons dans une application mobile hybride sans aucun problème.
Alireza Fattahi

Un contributeur de Mozilla qui a fermé une de mes questions sur mon utilisation de ce code source dans mon propre projet m'a conseillé d'utiliser un proxy CORS. Cela peut fonctionner côté serveur, peut-être dans Node.JS, mais cela ne peut pas fonctionner tel quel côté client. Je ne suis pas la seule personne à avoir eu ce problème avec ce code source et j'ai vu quelques commentaires dans un article similaire sur css-tricks: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Vous êtes dans un cas très particulier.
gouessej

0

Vous pouvez utiliser jquery-rss ou Vanilla RSS , qui est livré avec de jolis modèles et est super facile à utiliser:

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

Voir http://jsfiddle.net/sdepold/ozq2dn9e/1/ pour un exemple fonctionnel.


0

En essayant de trouver une bonne solution pour cela maintenant, je suis tombé sur le plugin FeedEk jQuery RSS / ATOM Feed qui fait un excellent travail d'analyse et d'affichage des flux RSS et Atom via l' API jQuery Feed . Pour un flux RSS basé sur XML de base, j'ai trouvé qu'il fonctionne comme un charme et n'a pas besoin de scripts côté serveur ou d'autres solutions de contournement CORS pour qu'il fonctionne même localement.


0

J'étais tellement exaspéré par de nombreux articles et réponses trompeurs que j'ai écrit mon propre lecteur RSS: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- créer-un-lecteur-rss-en-javascript /

Vous pouvez utiliser des requêtes AJAX pour récupérer les fichiers RSS, mais cela fonctionnera si et seulement si vous utilisez un proxy CORS. Je vais essayer d'écrire mon propre proxy CORS pour vous donner une solution plus robuste. En attendant, ça marche, je l'ai déployé sur mon serveur sous Debian Linux.

Ma solution n'utilise pas JQuery, j'utilise uniquement des API standard Javascript sans bibliothèque tierce et elle est censée fonctionner même avec Microsoft Internet Explorer 11.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.