从RSS / Atom提要中提取图像

时间:2017-08-25 16:16:43

标签: javascript jquery xml rss rss-reader

我想知道如何从RSS和Atom提取中提取图像,这样我就可以在使用它的相对标题,描述和链接的容器中显示提要时将它们用作缩略图。到目前为止,我的代码(如下所示)仅从某些Feed类型中抓取图像,我想知道如何抓取脚本遇到的每个图像。

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

例如,我无法弄清楚如何从下面的代码rss Feed代码段获取图片链接:

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

2 个答案:

答案 0 :(得分:4)

您也可以试试这个。

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'))

答案 1 :(得分:3)

使用这些来源:

通过将dataType设置为'xml',您可以正确地将内容作为XML获取必要

此代码是自包含的并且有效:

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

这有点不精确,因为您没有提供足够的信息来准确再现您的情况。我将从你的问题开始,好像这是你代码的唯一部分:

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

这应该接近:

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