Extracting images from RSS/Atom feeds

Question

I'm wondering how to extract images from RSS and Atom feeds so I can use them as a thumbnail when display the feed in a container with it's relative Title, Description and Link. So far my code, (shown below), grabs images from only certain feed types, I'm wondering how I can grab every image my script comes across.

if (feed_image_type == "description") {
    item_img = $($(this).find('description').text()).find("img").attr("src");
} else if (feed_image_type == "encoded") {
    item_img = $($(this).find('encoded').text()).find("img").attr("src");
} else if (feed_image_type == "thumbnail") {
    item_img = $(this).find('thumbnail').attr('url');
} else {
    item_img = $(this).find('enclosure').attr('url');
}

For example, I cannot figure out how I would grab the image link from the code rss feed snippet below:

<description>
  <![CDATA[
   <img src="https://i.kinja-img.com/gawker-media/image/upload/s--E93LuLOd--/c_fit,fl_progressive,q_80,w_636/hd6cujrvf1d72sbxsbnr.jpg" /><p>With a surprise showing of skill and, at one point, a miracle, the bottom-ranked team in the European <em>League </em>Championship Series will not end the summer winless.<br></p><p><a href="http://compete.kotaku.com/european-league-team-finally-wins-its-first-series-of-t-1797363638">Read more...</a></p>
  ]]>
</description>

Did you try `$(this).find('img').attr('src')` – styfle Aug 25 '17 at 17:03 — styfle, Aug 25 '17 at 17:03

score 3 · Answer 1 · answered Aug 29 '17 at 04:21

Using these sources:

It is essential that you get your content correctly as XML, by setting the dataType to 'xml'.

This code is self-contained and works:

var xmlString = '<Customer><![CDATA[ <img src="y1" /> ]]></Customer>';
var xmlObj = $.parseXML(xmlString);
var cdataText = xmlObj.firstChild.firstChild.textContent;
var jqueryObj = $(cdataText);
var imgUrl = jqueryObj.find('img').attr('src');
console.log(imgUrl);

This is slightly imprecise because you don't give quite enough information to exactly reproduce your situation. I will start as though this from your question is the only part of your code:

if (feed_image_type == "description") {
    item_img = $($(this).find('description').text()).find("img").attr("src");
}

This ought to get close:

if (feed_image_type == "description") {
    var cdataText = $(this).firstChild.firstChild.textContent;
    var jqueryObj = $(cdataText);
    item_img = jqueryObj.find('img').attr('src');
}

score 3 · Answer 2 · answered Sep 03 '17 at 16:48

You can also try this.

let str = `<description>
  <![CDATA[
   <img src="https://i.kinja-img.com/gawker-media/image/upload/s--E93LuLOd--/c_fit,fl_progressive,q_80,w_636/hd6cujrvf1d72sbxsbnr.jpg" /><p>With a surprise showing of skill and, at one point, a miracle, the bottom-ranked team in the European <em>League </em>Championship Series will not end the summer winless.<br></p><p><a href="http://compete.kotaku.com/european-league-team-finally-wins-its-first-series-of-t-1797363638">Read more...</a></p>
  ]]>
</description>`;

//We need to strip CDATA in our case. Otherwise the parser will not parse the contents inside it.
str = str.replace("<![CDATA[", "").replace("]]>", "")
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(str,"text/xml");
let images = [...xmlDoc.querySelectorAll('img')].map(image=>image.getAttribute('src'))

Extracting images from RSS/Atom feeds

2 Answers2