¿Cómo analizar una fuente RSS usando JavaScript?

116

Necesito analizar una fuente RSS (XML versión 2.0) y mostrar los detalles analizados en una página HTML.

Thiru
fuente
12
1) ¿Qué has probado exactamente ? 2) ¿Qué es exactamente lo que desea analizar? (¿Qué información desea extraer del feed?) 3) ¿Dónde desea que se muestre exactamente en su página? 4) ¿Cuál es exactamente su marcado HTML? Aparte de eso, a todos nos gusta fingir que somos David Copperfield, pero no estoy seguro de que engañemos a la audiencia por mucho tiempo.
Haylem
No, tengo una alimentación sucesiva conmigo. No puedo publicarlo. Es por eso que puse una muestra aquí
Thiru
ok, pero eso NO es una muestra. Era solo una URL a una página inexistente. En ese caso, mi respuesta tiene una "muestra". Es la variable FEED_URL. Solo ponga lo que necesita allí. Si necesita más ayuda, también debe proporcionar más detalles sobre qué elementos del feed necesita, cómo desea que se vean los stubs HTMK, dónde desea inyectar los stubs HTML generados y también podría proporcionar una muestra real de su fuente RSS (simplemente copie pase un extracto y reemplace el contenido real con marcadores de posición).
Haylem

Respuestas:

216

Analizando el feed

Con jQuery 's jFeed

(Realmente no recomiendo ese, vea las otras opciones).

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

Con el soporte XML integrado 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());
    });
});

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

Pero eso significa que confía en que estén en línea y sean accesibles.


Construyendo contenido

Una vez que haya extraído con éxito la información que necesita del feed, puede crear DocumentFragments (que document.createDocumentFragment()contengan los elementos (creados con document.createElement()) que querrá inyectar para mostrar sus datos.


Inyectando el contenido

Seleccione el elemento contenedor que desea en la página y agregue los fragmentos de su documento a él, y simplemente use innerHTML para reemplazar su contenido por completo.

Algo como:

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

o:

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

Datos de prueba

Usando el feed de esta pregunta , que a partir de este escrito da:

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

Ejecuciones

Usando el soporte XML integrado de jQuery

Invocando:

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

Usando jQuery y las API de Google AJAX

Invocando:

$.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
Haylem
fuente
1
Gracias por tu respuesta haylem. Pero no obtuve una salida para esto. ¿No es posible con javascript?
Thiru
1
@Thiru: Acabo de probar el último método con el feed RSS de esta pregunta ( stackoverflow.com/feeds/question/10943544 ) y funcionó bien para mí.
Haylem
8
Puede que tenga un fragmento de código de trabajo completo aquí. Estoy seguro de que puede resolver el resto por su cuenta.
Haylem
2
@Timmy: ¿haciendo qué? ¿Eres amigo de Thiru? Tiene técnicas de notificación de problemas similares. Simplemente copié y pegué los últimos 2 fragmentos de código en mi consola, los ejecuté y obtuve los resultados como esperaba. ¿Qué hizo, cómo, con qué recurso?
Haylem
2
Las API de Google AJAX están obsoletas. No está disponible desde enero de 2017.
Ezee
39

Otra opción obsoleta (gracias a @daylight) , y la más fácil para mí (esto es lo que estoy usando para SpokenToday.info ):

La API de Google Feed sin usar JQuery y con solo 2 pasos:

  1. Importar la biblioteca:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
  2. Buscar / cargar feeds ( documentación ):

    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. Para analizar los datos, consulte la documentación sobre el formato de respuesta .

Nahuel Barrios
fuente
5
Google dice: Esta API está oficialmente obsoleta.
23
La API de Google Feed está obsoleta y ya no funciona a partir del 12/02/2015. Bummer
raddevus
según ese código, ¿podría agregar un mensaje para ingresar la URL del feed y luego concatenar la propiedad para incluir un valor para analizar cualquier feed rss que desee? por ejemplo, si estuviera tratando con varias imágenes, podría concatenar la cadena y el valor:document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja
2
Las API de Google AJAX están obsoletas. No está disponible desde enero de 2017
Ezee
7
¿Alguien sabe de una alternativa adecuada ahora que la API de Google no funciona?
duellsy
3

Si está buscando una alternativa simple y gratuita a la API de Google Feed de para su widget rss, rss2json.com podría ser una solución adecuada para eso.

Puede intentar ver cómo funciona en un código de muestra de la documentación de la API a continuación:

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

Para cualquier otra persona que lea esto (a partir de 2019), lamentablemente, la mayoría de las implementaciones de lectura JS RSS ahora no funcionan. En primer lugar, la API de Google se ha cerrado, por lo que ya no es una opción y, debido a la política de seguridad de CORS, por lo general, ahora no puede solicitar feeds RSS entre dominios.

Usando el ejemplo en https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015) obtengo lo siguiente:

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.

Esto es correcto y es una precaución de seguridad del sitio web final, pero ahora significa que es poco probable que las respuestas anteriores funcionen.

Mi solución probablemente será analizar la fuente RSS a través de PHP y permitir que javascript acceda a mi PHP en lugar de intentar acceder a la fuente de destino final.

Ukuser32
fuente
1

Si desea utilizar una API de JavaScript simple, hay un buen ejemplo en https://github.com/hongkiat/js-rss-reader/

La descripción completa en https://www.hongkiat.com/blog/rss-reader-in-javascript/

Utiliza el fetchmétodo como un método global que busca un recurso de forma asincrónica. A continuación se muestra un fragmento de código:

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
fuente
El ejemplo del artículo que cita no funciona como está. Debe modificar las líneas 15 y 26 en rss.js para usar un proxy CORS para que funcione. Si no lo hace, obtendrá algunos errores debido a la política del mismo origen: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… Además, la API de recuperación no funciona en Microsoft Internet Explorer 11, prefiero utilizar XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Usé este código fuente en mi propio servidor. Le animo a que dedique algún tiempo a realizar algunas comprobaciones antes de publicar.
gouessej
El problema de CORS no está relacionado con esta respuesta. Vuelva a leer el enlace de CORS que mencionó o algunos otros recursos sobre cómo solucionar el problema de CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi
No, el problema de CORS está relacionado con su respuesta. El ejemplo del artículo que citó no se puede usar tal como está y, obviamente, depende de los hosts configurar esos encabezados, no se puede arreglar en el lado del cliente, la única solución consiste en usar un proxy CORS. ¿Alguna vez ha probado el código fuente mencionado en este artículo?
gouessej
Por supuesto, lo estamos usando en una aplicación móvil híbrida sin ningún problema.
Alireza Fattahi
Un colaborador de Mozilla que cerró una pregunta mía sobre el uso de este código fuente en mi propio proyecto me recomendó usar un proxy CORS. Puede funcionar en el lado del servidor, tal vez en Node.JS pero no puede funcionar como está en el lado del cliente. No soy la única persona que tuvo este problema con este código fuente y vi algunos comentarios en un artículo similar sobre css-tricks: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Estás en un caso muy específico.
gouessej
0

Puede usar jquery-rss o Vanilla RSS , que viene con plantillas agradables y es muy fácil de usar:

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

Consulte http://jsfiddle.net/sdepold/ozq2dn9e/1/ para ver un ejemplo de trabajo.

sdepold
fuente
0

Tratando de encontrar una buena solución para esto ahora, me encontré con el complemento FeedEk jQuery RSS / ATOM Feed que hace un gran trabajo al analizar y mostrar los feeds RSS y Atom a través de la API de jQuery Feed . Para una fuente RSS básica basada en XML, descubrí que funciona como un encanto y no necesita scripts del lado del servidor u otras soluciones CORS para que se ejecute incluso localmente.

jimiayler
fuente
0

Estaba tan exasperado por muchos artículos y respuestas engañosas que escribí mi propio lector de RSS: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- para-crear-un-lector-de-rss-en-javascript /

Puede usar solicitudes AJAX para obtener los archivos RSS, pero funcionará si y solo si usa un proxy CORS. Intentaré escribir mi propio proxy CORS para brindarle una solución más sólida. Mientras tanto, funciona, lo implementé en mi servidor bajo Debian Linux.

Mi solución no usa JQuery, solo uso API estándar de Javascript sin bibliotecas de terceros y se supone que funciona incluso con Microsoft Internet Explorer 11.

gouessej
fuente