Как разобрать RSS-канал с помощью JavaScript?

116

Мне нужно проанализировать RSS-канал (XML версии 2.0) и отобразить проанализированные детали на странице HTML.

Thiru
источник
12
1) Что именно пробовали? 2) Что именно вы хотите разобрать? (какую информацию вы хотите извлечь из ленты?) 3) Где именно вы хотите, чтобы она отображалась на вашей странице? 4) Какая у вас разметка HTML? Если не считать этого, нам всем нравится притворяться, что мы Дэвид Копперфилд, но я не уверен, что мы долго дурачим публику.
haylem 08
Нет, у меня с собой последовательный корм. Я не могу опубликовать это. Вот почему я поместил образец сюда
Тиру
хорошо, но это НЕ образец. Это был просто URL-адрес несуществующей страницы. В таком случае в моем ответе есть «образец». Это переменная FEED_URL. Просто положите туда то, что вам нужно. Если вам нужна дополнительная помощь, вам также необходимо предоставить более подробную информацию о том, какие элементы фида вам нужны, как вы хотите, чтобы заглушки HTMK выглядели, куда вы хотите вставить сгенерированные заглушки HTML, и вы также можете предоставить реальный образец вашего RSS-канала (просто скопируйте отрывок и замените фактическое содержание заполнителями).
haylem 08

Ответы:

216

Разбор фида

С помощью Jquery «s jFeed

(Не рекомендую этот вариант, посмотрите другие варианты.)

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

Со встроенной поддержкой XML в 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());
    });
});

С помощью jQuery и 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);
      });
    }
  }
});

Но это означает, что вы полагаетесь на то, что они онлайн и доступны.


Создание контента

После того, как вы успешно извлекли необходимую информацию из фида, вы можете создать DocumentFragments (с document.createDocumentFragment()содержащими элементы (созданные с помощью document.createElement()), которые вы хотите ввести для отображения ваших данных.


Внедрение контента

Выберите элемент контейнера, который вы хотите разместить на странице, и добавьте к нему фрагменты документа и просто используйте innerHTML для полной замены его содержимого.

Что-то вроде:

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

или:

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

Данные испытаний

Используя этот вопрос , который на момент написания этой статьи дает:

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

Казни

Использование встроенной поддержки XML в jQuery

Вызов:

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

Распечатывает:

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

Использование jQuery и API Google AJAX

Вызов:

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

Распечатывает:

------------------------
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
источник
1
Спасибо за ответ, хайлем. Но я не получил по этому поводу вывода. Возможно ли использование javascript?
Тиру
1
@Thiru: Я просто попробовал последний метод с RSS-потоком этого вопроса ( stackoverflow.com/feeds/question/10943544 ), и он отлично сработал для меня.
haylem 08
8
Здесь у вас может быть весь рабочий фрагмент кода. Я уверен, что остальное ты сможешь решить самостоятельно.
хайлем
2
@ Тимми: чем занимаешься? Вы друг Тиру? У вас есть похожие методы сообщения о проблемах. Я просто скопировал последние 2 фрагмента кода в свою консоль, запустил их и получил ожидаемые результаты. Что вы делали, как, для какого ресурса?
haylem
2
API Google AJAX устарели. Он недоступен с января 2017 года.
Ezee,
39

Другой устаревший (благодаря @daylight) вариант, самый простой для меня (это то, что я использую для SpokenToday.info ):

Feed API Google без использования JQuery и только 2 шага:

  1. Импортируйте библиотеку:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("feeds", "1");</script>
  2. Найти / загрузить каналы ( документация ):

    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. Чтобы проанализировать данные, проверьте документацию о формате ответа .

Науэль Барриос
источник
5
Google говорит: этот API официально устарел.
23
Google Feed API устарел и больше не работает с 12 февраля 2015 г. Bummer
raddevus 02
на основе этого кода, не могли бы вы добавить приглашение для ввода URL-адреса канала, а затем объединить свойство, чтобы включить значение, чтобы проанализировать любой RSS-канал, который вы хотите? например, если бы я имел дело с несколькими изображениями, я мог бы document.getElementById('image').style.backgroundImage = "url('" + src + "')";
объединить
2
API Google AJAX устарели. Он недоступен с января 2017 г.
Ezee,
7
кто-нибудь знает подходящую альтернативу теперь, когда API Google не работает?
duellsy
3

Если вы ищете простую и бесплатную альтернативу Google Feed API для своего rss-виджета, то rss2json.com может быть подходящим решением для этого.

Вы можете попробовать увидеть, как это работает, на примере кода из документации по API ниже:

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
источник
3

Для всех, кто читает это (начиная с 2019 года), к сожалению, большинство реализаций чтения JS RSS сейчас не работают. Во-первых, Google API был отключен, поэтому это больше не вариант, и из-за политики безопасности CORS вы, как правило, теперь не можете запрашивать RSS-каналы между доменами.

Используя пример на https://www.raymondcamden.com/2015/12/08/parsing-rss-feeds-in-javascript-options (2015), я получаю следующее:

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.

Это правильно и является мерой безопасности конечного веб-сайта, но теперь означает, что приведенные выше ответы вряд ли сработают.

Мой обходной путь, вероятно, будет заключаться в том, чтобы проанализировать RSS-канал через PHP и разрешить javascript доступ к моему PHP, а не пытаться получить доступ к самому каналу конечного назначения.

Ukuser32
источник
1

Если вы хотите использовать простой API-интерфейс javascript, есть хороший пример на https://github.com/hongkiat/js-rss-reader/

Полное описание на https://www.hongkiat.com/blog/rss-reader-in-javascript/

Он использует fetchметод как глобальный метод, который асинхронно извлекает ресурс. Ниже приведен фрагмент кода:

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'))
Алиреза Фаттахи
источник
Пример в цитируемой вами статье не работает как есть. Вам нужно изменить строки 15 и 26 в rss.js, чтобы использовать прокси-сервер CORS для его работы. Если вы этого не сделаете, вы получите несколько ошибок из-за политики того же происхождения: developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/ ... Более того, API-интерфейс выборки не работает в Microsoft Internet Explorer 11, лучше используйте XMLHTTPRequest: developer.microsoft.com/en-us/microsoft-edge/status/fetchapi Я использовал этот исходный код на своем собственном сервере. Я рекомендую вам потратить некоторое время на выполнение некоторых проверок перед публикацией.
gouessej
Проблема CORS не связана с этим ответом. Пожалуйста, перечитайте ссылку CORS, которую вы упомянули, или некоторые другие ресурсы об устранении проблемы CORS stackoverflow.com/questions/10636611/… .
Алиреза Фаттахи,
Нет, проблема CORS связана с вашим ответом. Пример в процитированной вами статье нельзя использовать как есть, и, очевидно, эти заголовки должны устанавливать хосты, это не может быть исправлено на стороне клиента, единственный обходной путь заключается в использовании прокси-сервера CORS. Вы когда-нибудь пробовали исходный код, упомянутый в этой статье?
gouessej
Конечно, мы без проблем используем его в гибридном мобильном приложении.
Алиреза Фаттахи,
Участник Mozilla, который закрыл мой вопрос об использовании этого исходного кода в моем собственном проекте, посоветовал мне использовать прокси-сервер CORS. Он может работать на стороне сервера, возможно, в Node.JS, но не может работать как на стороне клиента. Я не единственный, у кого была эта проблема с этим исходным кодом, и я видел некоторые комментарии в аналогичной статье о css-tricks: css-tricks.com/how-to-fetch-and-parse-rss-feeds-in -javascript /… Вы находитесь в очень специфическом случае.
gouessej
0

Вы можете использовать jquery-rss или Vanilla RSS , который поставляется с хорошими шаблонами и очень прост в использовании:

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

См. Http://jsfiddle.net/sdepold/ozq2dn9e/1/ для рабочего примера.

sdepold
источник
0

Пытаясь найти хорошее решение для этого сейчас, я наткнулся на подключаемый модуль FeedEk jQuery RSS / ATOM Feed , который отлично справляется с синтаксическим анализом и отображением каналов RSS и Atom через API jQuery Feed . Я обнаружил, что базовый RSS-канал на основе XML работает как шарм и не требует серверных скриптов или других обходных путей CORS для его запуска даже локально.

jimiayler
источник
0

Меня настолько разозлили многие вводящие в заблуждение статьи и ответы, что я написал свой собственный RSS-ридер: https://gouessej.wordpress.com/2020/06/28/comment-creer-un-lecteur-rss-en-javascript-how- чтобы создать-а-RSS-ридер-в-JavaScript /

Вы можете использовать запросы AJAX для получения файлов RSS, но он будет работать тогда и только тогда, когда вы используете прокси-сервер CORS. Я попытаюсь написать свой собственный прокси-сервер CORS, чтобы предоставить вам более надежное решение. А пока работает, я развернул на своем сервере под Debian Linux.

Мое решение не использует JQuery, я использую только стандартные стандартные API-интерфейсы Javascript без сторонних библиотек, и оно должно работать даже с Microsoft Internet Explorer 11.

gouessej
источник