Как создать приложение для чтения RSS на JavaScript

RSS (Really Simple Syndication) – это стандартизированный формат, используемый онлайн-издателями для передачи своего контента на другие веб-сайты и сервисы. Документ RSS, также известный как канал, – это документ XML, содержащий контент, который издатель хочет распространять.

RSS-каналы доступны почти на всех новостных веб-сайтах и ​​в блогах, чтобы их читатели всегда были в курсе своего содержания. Их также можно найти на нетекстовых веб-сайтах, таких как YouTube, где вы можете использовать канал канала YouTube для получения информации о последних видео.

Читайте также: Как создать логотип RSS-канала с помощью CSS3

Программы, которые получают доступ к этим каналам, читают и отображают их содержимое, называются программами чтения RSS Вы можете создать простую программу для чтения RSS на JavaScript. В этом уроке мы увидим, как это сделать.
Структура RSS-канала
У RSS-канала есть корневой элемент, который называется , аналогично тег найден в документах HTML. Внутри тег, есть элемент, вроде как в HTML, который включает в себя множество подэлементов, содержащих распределенный контент сайта.

Фид обычно содержит некоторую основную информацию, такую ​​как заголовок, URL и описание веб-сайта, а также отдельные обновленные публикации, статьи или другое содержимое этого веб-сайта. Эта информация находится вhttps://www.hongkiat.com/ Советы по дизайну, учебник и вдохновение
ан-нас


Когда-нибудь задумывались, сколько правил CSS
      находятся в таблице стилей? Или ты когда-нибудь
      хотел увидеть… 18/05/2017https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/


Amazon не привыкать к концепции умного дома
      системы со встроенным цифровым помощником.
      В конце концов, … 17/05/2017https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

Извлечение корма
Нам нужно получить канал с нашим приложением для чтения RSS. На веб-сайте URL-адрес канала RSS можно найти внутри тег, используя тип приложения / rss + xml. Например, вы найдете следующую ссылку RSS-канала на Hongkiat.com.

Во-первых, давайте посмотрим, как получить URL канала веб-сайта с помощью JavaScript.

fetch (websiteUrl) .then ((res) => {
  res.text (). then ((htmlTxt) => {
    var domParser = новый DOMParser ()
    let doc = domParser.parseFromString (htmlTxt, ‘text / html’)
    var feedUrl = doc.querySelector (‘ссылка[type=”application/rss+xml”]«) .Href
  })
}). catch (() => console.error (‘Ошибка при загрузке сайта’))

выборки () Метод – это глобальный метод, который асинхронно выбирает ресурс. Он принимает URL ресурса в качестве аргумента (URL сайта в нашем коде). Он возвращает объект Promise, поэтому, когда метод успешно извлекает веб-сайт (т. Е. Обещание выполнено), первая функция внутри оператора then () обрабатывает извлеченный ответ (res в приведенном выше коде).

Читайте также: Начало работы с обещаниями JavaScript

Полученный ответ затем полностью считывается в текстовую строку, используя текст() метод. Этот текст представляет собой HTML-текст нашего загруженного веб-сайта. Как и fetch (), text () также возвращает объект Promise. Таким образом, когда он успешно создает текст ответа из потока ответов, then () будет обрабатывать этот текст ответа (htmlText в приведенном выше коде).

Как только HTML-текст сайта доступен, мы используем DOMParser API разобрать его в документ DOM. DOMParser анализирует текстовую строку XML / HTML в документе DOM. Его метод parseFromString () принимает два аргумента: анализируемый текст и тип содержимого.

Затем из созданного документа DOM мы находим значение href соответствующего тег с помощью querySelector () метод для того, чтобы получить URL-адрес канала.
Разбор и отображение ленты
Как только мы получим URL-адрес канала веб-сайта, нам нужно получить и прочитать документ RSS, найденный по этому URL-адресу.

fetch (feedUrl) .then ((res) => {
  res.text (). then ((xmlTxt) => {
    var domParser = новый DOMParser ()
    let doc = domParser.parseFromString (xmlTxt, ‘text / xml’)
    doc.querySelectorAll (‘item’). forEach ((item) => {
let h1 = document.createElement (‘h1’)
h1.textContent = item.querySelector (‘title’). textContent
document.querySelector ( ‘выход’). AppendChild (h1)
       })
     })
})

Таким же образом, как мы выбирали и анализировали веб-сайт, теперь мы получаем и анализируем XML-канал в DOM-документе. Чтобы достичь этого, мы используем тип содержимого text / xml в методе parseFromString ().

В разобранном документе мы выбираем все элементы, использующие querySelectorAll метод и цикл через каждого.

Внутри каждого элемента мы можем получить доступ к тегам, таким как