Come analizzare un feed RSS utilizzando JavaScript?


116

Ho bisogno di analizzare un feed RSS (XML versione 2.0) e visualizzare i dettagli analizzati in una pagina HTML.


12
1) Cosa hai provato esattamente ? 2) Che cosa vuoi analizzare esattamente ? (quali informazioni vuoi estrarre dal feed?) 3) Dove vuoi che appaia esattamente nella tua pagina? 4) Qual è esattamente il tuo markup HTML? A parte questo, a tutti noi piace fingere di essere David Copperfield, ma non sono sicuro che inganneremmo il pubblico a lungo.
haylem

No, ho un feed successivo con me. Non posso pubblicarlo. Ecco perché ho inserito un campione qui
Thiru

ok ma NON è un campione. Era solo un URL a una pagina inesistente. In tal caso la mia risposta ha un "campione". È la variabile FEED_URL. Metti solo quello che ti serve. Se hai bisogno di ulteriore aiuto, devi anche fornire maggiori dettagli su quali elementi del feed ti servono, come vuoi che appaiano gli stub HTMK, dove vuoi iniettare gli stub HTML generati e potresti anche fornire un esempio reale del tuo feed RSS (copia semplicemente un estratto e sostituisci il contenuto effettivo con segnaposto).
haylem

Risposte:


216

Analisi del feed

Con jQuery s' jFeed

(Non lo consiglio davvero, guarda le altre opzioni.)

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

Con il supporto XML integrato di 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());
    });
});

Con jQuery e 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);
      });
    }
  }
});

Ma questo significa che fai affidamento sul fatto che siano online e raggiungibili.


Creazione di contenuti

Dopo aver estratto con successo le informazioni di cui hai bisogno dal feed, potresti creare dei messaggi DocumentFragment( document.createDocumentFragment()contenenti gli elementi (creati con document.createElement()) che desideri inserire per visualizzare i tuoi dati.


Iniezione del contenuto

Seleziona l'elemento contenitore che desideri nella pagina e aggiungi i frammenti di documento ad esso, quindi usa semplicemente innerHTML per sostituire completamente il suo contenuto.

Qualcosa di simile a:

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

o:

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

Dati di test

Utilizzando il feed di questa domanda , che al momento della stesura di questo articolo fornisce:

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

esecuzioni

Utilizzo del supporto XML integrato di jQuery

invocare:

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

Stampe:

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

Utilizzando jQuery e le API Google AJAX

invocare:

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

Stampe:

------------------------
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
Grazie per la tua risposta haylem. Ma non ho ricevuto un output per questo. Non è possibile con javascript?
Thiru

1
@Thiru: ho appena provato l'ultimo metodo con il feed RSS di questa domanda ( stackoverflow.com/feeds/question/10943544 ) e ha funzionato bene per me.
haylem

8
Potresti avere un intero snippet di codice funzionante qui. Sono sicuro che puoi risolvere il resto da solo.
haylem

2
@Timmy: fare cosa? Sei un amico di Thiru? Hai tecniche di segnalazione dei problemi simili. Ho appena copiato e incollato gli ultimi 2 frammenti di codice nella mia console e li ho eseguiti e ho ottenuto gli output come previsto. Cosa hai fatto, come, per quale risorsa?
haylem

2
Le API di Google AJAX sono obsolete. Non è disponibile da gennaio 2017.
Ezee

39

Un'altra opzione deprecata (grazie a @daylight) e la più semplice per me (questo è quello che sto usando per SpokenToday.info ):

L' API di Google Feed senza utilizzare JQuery e con solo 2 passaggi:

  1. Importa la libreria:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
    
  2. Trova / carica feed ( documentazione ):

    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. Per analizzare i dati, controllare la documentazione sul formato della risposta .


5
Google afferma: questa API è ufficialmente deprecata.

23
L'API di Google Feed è obsoleta e non funziona più dal 12/02/2015. Bummer
raddevus

in base a quel codice, potresti aggiungere un prompt per inserire l'URL del feed, quindi concatenare la proprietà per includere un valore al fine di analizzare qualsiasi feed RSS che desideri? ad esempio, se avessi a che fare con più immagini, potrei concatenare la stringa e il valore:document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja

2
Le API di Google AJAX sono obsolete. Non è disponibile da gennaio 2017
Ezee

7
qualcuno sa di un'alternativa adeguata ora che l'API di Google non funziona?
duellante

3

Se stai cercando un'alternativa semplice e gratuita all'API di Google Feed per il tuo widget rss, rss2json.com potrebbe essere una soluzione adatta.

Puoi provare a vedere come funziona su un codice di esempio dalla documentazione api di seguito:

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

Per chiunque altro legga questo (dal 2019 in poi) purtroppo la maggior parte delle implementazioni di lettura RSS JS ora non funziona. Innanzitutto l'API di Google è stata disattivata, quindi questa non è più un'opzione e, a causa della politica di sicurezza CORS, in genere non è possibile richiedere feed RSS interdominio.

Utilizzando l'esempio su https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) ottengo quanto segue:

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.

Ciò è corretto ed è una precauzione di sicurezza del sito Web finale, ma ora significa che è improbabile che le risposte precedenti funzionino.

La mia soluzione sarà probabilmente quella di analizzare il feed RSS tramite PHP e consentire a javascript di accedere al mio PHP piuttosto che tentare di accedere al feed di destinazione finale stesso.


1

Se desideri utilizzare una semplice API JavaScript, c'è un buon esempio su https://github.com/hongkiat/js-rss-reader/

La descrizione completa su https://www.hongkiat.com/blog/rss-reader-in-javascript/

Utilizza il fetchmetodo come metodo globale che recupera in modo asincrono una risorsa. Di seguito è riportato uno snap di codice:

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'esempio nell'articolo che citi non funziona così com'è. È necessario modificare le righe 15 e 26 in rss.js per utilizzare un proxy CORS per farlo funzionare. Se non lo fai, riceverai alcuni errori a causa della politica Same Origin: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… Inoltre, l'API di recupero non funziona in Microsoft Internet Explorer 11, piuttosto usa XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Ho usato questo codice sorgente sul mio server. Ti incoraggio a dedicare un po 'di tempo all'esecuzione di alcuni controlli prima di pubblicare.
gouessej

Il problema CORS non è correlato a questa risposta. Si prega di rileggere il collegamento CORS che hai citato o altre risorse per risolvere il problema CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi

No, il problema CORS è correlato alla tua risposta. L'esempio nell'articolo che hai citato non può essere utilizzato così com'è e ovviamente spetta agli host impostare quelle intestazioni, non può essere riparato lato client, l'unica soluzione consiste nell'utilizzare un proxy CORS. Hai mai provato il codice sorgente menzionato in questo articolo?
gouessej

Ovviamente lo stiamo usando in un'app mobile ibrida senza problemi.
Alireza Fattahi

Un collaboratore di Mozilla che ha chiuso una mia domanda sul mio utilizzo di questo codice sorgente nel mio progetto mi ha consigliato di utilizzare un proxy CORS. Può funzionare sul lato server, forse in Node.JS ma non può funzionare come sul lato client. Non sono l'unica persona che ha avuto questo problema con questo codice sorgente e ho visto alcuni commenti in un articolo simile su css-tricks: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Ti trovi in ​​un caso molto specifico.
gouessej

0

Puoi usare jquery-rss o Vanilla RSS , che viene fornito con bei modelli ed è super facile da usare:

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

Vedi http://jsfiddle.net/sdepold/ozq2dn9e/1/ per un esempio funzionante.


0

Cercando di trovare una buona soluzione per questo ora, mi sono imbattuto nel FeedEk jQuery RSS / ATOM Feed Plugin che fa un ottimo lavoro di analisi e visualizzazione di feed RSS e Atom tramite l' API jQuery Feed . Per un feed RSS di base basato su XML, ho scoperto che funziona come un fascino e non necessita di script lato server o altre soluzioni alternative CORS per funzionare anche localmente.


0

Ero così esasperato da molti articoli e risposte fuorvianti che ho scritto il mio lettore RSS: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- to-create-a-rss-reader-in-javascript /

Puoi utilizzare le richieste AJAX per recuperare i file RSS, ma funzionerà se e solo se utilizzi un proxy CORS. Proverò a scrivere il mio proxy CORS per darti una soluzione più robusta. Nel frattempo funziona, l'ho distribuito sul mio server sotto Debian Linux.

La mia soluzione non usa JQuery, io uso solo API standard Javascript semplici senza librerie di terze parti e dovrebbe funzionare anche con Microsoft Internet Explorer 11.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.