Como analisar um feed RSS usando JavaScript?


116

Preciso analisar um feed RSS (XML versão 2.0) e exibir os detalhes analisados ​​em uma página HTML.


12
1) O que exatamente você tentou? 2) O que exatamente você deseja analisar? (quais informações você deseja extrair do feed?) 3) Onde exatamente você deseja que sejam exibidas em sua página? 4) O que exatamente é a sua marcação HTML? Fora isso, todos nós gostamos de fingir que somos David Copperfield, mas não tenho certeza se enganaríamos o público por muito tempo.
haylem

Não, eu tenho um feed sucessivo comigo. Eu não posso publicar. É por isso que coloquei uma amostra aqui
quinta

ok, mas isso NÃO é uma amostra. Era apenas um URL para uma página inexistente. Nesse caso, minha resposta tem uma "amostra". É a variável FEED_URL. Basta colocar o que você precisa lá. Se precisar de mais ajuda, você também precisará fornecer mais detalhes sobre quais elementos do feed você precisa, como deseja que os stubs HTMK se pareçam, onde deseja injetar os stubs HTML gerados e também pode fornecer uma amostra real do seu feed RSS (apenas copie um trecho e substitua o conteúdo real por espaços reservados).
haylem

Respostas:


216

Analisando o Feed

Com jQuery 's jFeed

(Não recomendo realmente esse, consulte as outras opções.)

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

Com suporte XML integrado da 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());
    });
});

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

Mas isso significa que você está confiante de que eles estarão online e acessíveis.


Conteúdo de construção

Depois de extrair com êxito as informações de que precisa do feed, você pode criar DocumentFragments ( document.createDocumentFragment()contendo os elementos (criados com document.createElement()) que deseja injetar para exibir seus dados.


Injetando o conteúdo

Selecione o elemento de contêiner que você deseja na página e anexe os fragmentos de seu documento a ele e simplesmente use innerHTML para substituir seu conteúdo inteiramente.

Algo como:

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

ou:

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

Dados de teste

Usando o feed desta pergunta , que no momento desta redação fornece:

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

Execuções

Usando o suporte XML integrado da 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 e APIs AJAX do Google

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

1
Obrigado por sua resposta haylem. Mas eu não obtive uma saída para isso. Não é possível com javascript?
Quinta

1
@Thiru: Acabei de experimentar o último método com o feed RSS desta pergunta ( stackoverflow.com/feeds/question/10943544 ) e funcionou bem para mim.
haylem

8
Você pode ter um trecho de código inteiro funcionando aqui. Tenho certeza de que você pode resolver o resto sozinho.
haylem

2
@Timmy: fazendo o quê? Você é amigo de Thiru? Você tem técnicas semelhantes de relatório de problemas. Acabei de copiar e colar os últimos 2 trechos de código em meu console e executá-los e obter as saídas conforme o esperado. O que você fez, como, por qual recurso?
haylem

2
As APIs AJAX do Google estão obsoletas. Não está disponível desde janeiro de 2017.
Ezee

39

Outra opção obsoleta (graças a @daylight) e a mais fácil para mim (é isso que estou usando para SpokenToday.info ):

A API do Google Feed sem usar JQuery e com apenas 2 etapas:

  1. Importe a biblioteca:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
  2. Encontrar / carregar feeds ( documentação ):

    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 analisar os dados, verifique a documentação sobre o formato da resposta .


5
Google diz: Esta API está oficialmente obsoleta.

23
A API do Google Feed está obsoleta e não funciona mais a partir de 12/02/2015. Bummer
raddevus

com base nesse código, você poderia adicionar um prompt para inserir o URL do feed e, em seguida, concatenar a propriedade para incluir um valor a fim de analisar qualquer feed rss desejado? por exemplo, se eu estivesse lidando com várias imagens, poderia concatenar a string e o valor:document.getElementById('image').style.backgroundImage = "url('" + src + "')";
noobninja

2
As APIs AJAX do Google estão obsoletas. Não está disponível desde janeiro de 2017
Ezee

7
Alguém sabe de uma alternativa adequada agora que a API do Google está desativada?
duellsy

3

Se você está procurando uma alternativa simples e gratuita para a API do Google Feed para seu widget rss, rss2json.com pode ser uma solução adequada para isso.

Você pode tentar ver como funciona em um código de amostra da documentação da API abaixo:

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

Para qualquer pessoa que esteja lendo isso (em 2019 em diante), infelizmente, a maioria das implementações de leitura de RSS RSS não funcionam agora. Em primeiro lugar, a API do Google foi encerrada, portanto, não é mais uma opção e, por causa da política de segurança do CORS, você geralmente não pode solicitar feeds RSS entre domínios.

Usando o exemplo em https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015), obtenho o seguinte:

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.

Isso está correto e é uma precaução de segurança para o site final, mas agora significa que as respostas acima provavelmente não funcionarão.

Minha solução alternativa provavelmente será analisar o feed RSS por meio de PHP e permitir que o javascript acesse meu PHP em vez de tentar acessar o feed de destino final.


1

Se você deseja usar uma API javascript simples, há um bom exemplo em https://github.com/hongkiat/js-rss-reader/

A descrição completa em https://www.hongkiat.com/blog/rss-reader-in-javascript/

Ele usa o fetchmétodo como um método global que busca um recurso de maneira assíncrona. Abaixo está um pequeno 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'))

O exemplo no artigo que você cita não funciona como está. Você precisa modificar as linhas 15 e 26 em rss.js para usar um proxy CORS e fazê-lo funcionar. Caso contrário, você obterá alguns erros por causa da política da mesma origem: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/… Além disso, a API de busca não funciona em Microsoft Internet Explorer 11, em vez de usar XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Usei este código-fonte em meu próprio servidor. Eu o encorajo a passar algum tempo realizando algumas verificações antes de postar.
gouessej

A questão do CORS não está relacionada a esta resposta. Leia novamente o link do CORS que você mencionou ou alguns outros recursos sobre como corrigir o problema do CORS stackoverflow.com/questions/10636611/… .
Alireza Fattahi

Não, o problema do CORS está relacionado à sua resposta. O exemplo do artigo que você citou não pode ser usado como está e obviamente cabe aos hosts definirem esses cabeçalhos, não pode ser corrigido no lado do cliente, a única solução consiste em usar um proxy CORS. Você já experimentou o código-fonte mencionado neste artigo?
gouessej

Claro, estamos usando em um aplicativo móvel híbrido sem nenhum problema.
Alireza Fattahi

Um colaborador da Mozilla que fechou uma pergunta minha sobre meu uso deste código-fonte em meu próprio projeto me aconselhou a usar um proxy CORS. Pode funcionar no lado do servidor, talvez no Node.JS, mas não pode funcionar como está no lado do cliente. Não sou a única pessoa que teve esse problema com este código-fonte e vi alguns comentários em um artigo semelhante sobre css-tricks: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Você está em um caso muito específico.
gouessej

0

Você pode usar jquery-rss ou Vanilla RSS , que vem com bons modelos e é super 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 obter um exemplo prático .


0

Tentando encontrar uma boa solução para isso agora, me deparei com o plugin de feed RSS / ATOM do FeedEk jQuery que faz um ótimo trabalho de análise e exibição de feeds RSS e Atom por meio da API de feed jQuery . Para um feed RSS básico baseado em XML, descobri que ele funciona perfeitamente e não precisa de scripts do lado do servidor ou outras soluções CORS para ser executado, mesmo localmente.


0

Fiquei tão irritado com muitos artigos e respostas enganosas que escrevi meu próprio leitor RSS: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- to-create-a-rss-reader-in-javascript /

Você pode usar solicitações AJAX para buscar os arquivos RSS, mas funcionará se e somente se você usar um proxy CORS. Tentarei escrever meu próprio proxy CORS para fornecer a você uma solução mais robusta. Enquanto isso, ele funciona, eu o implantei em meu servidor no Debian Linux.

Minha solução não usa JQuery, eu uso apenas APIs padrão JavaScript simples, sem bibliotecas de terceiros, e deve funcionar mesmo com o Microsoft Internet Explorer 11.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.