如何使用 JavaScript 从 RSS 中获取 img src？答案

【问题标题】：How to get img src out of RSS with JavaScript?如何使用 JavaScript 从 RSS 中获取 img src？
【发布时间】：2014-10-29 09:47:29
【问题描述】：

我想知道如何从 RSS 中的项目中取出 img src。我正在使用 HTML 和 JavaScript 来读取标签。

HTML 和 JAVASCRIPT：

<html>
<body>
    <script>
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","news.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    var x=xmlDoc.getElementsByTagName("item");
    for (i=0;i<x.length;i++)
      { 
        var title = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
        var linkstr = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
        var datestr = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
        var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

        document.write(title);
        document.write(linkstr);
        document.write(datestr);
        document.write(image);
      }
    </script>
</body>
</html>

XML：

<description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div>

<content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/news/1/images/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news.</p>
</div><p><a rel="nofollow" href="http://website.com/news/1">This is news</a><a rel="nofollow" href="http://website.com">Website</a>.</p>
]]></content:encoded>

<enclosure url="http://website.com/news/1/images/image.jpg" length="174264" type="image/jpg" />

<media:content xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>Website</media:copyright>
</media:content>

<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://website.com/news/1/images/image.jpg" width="640" height="640" />

所以一开始我尝试了这样的事情：

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("enclosure")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:content")[0].childNodes[0].nodeValue;

var image = x[i].getElementsByTagName("media:thumbnail")[0].childNodes[0].nodeValue;

但它们都不起作用..我正在使用 wordpress，起初我寻找为我的 RSS 创建自己的标签的方法，您可以在其中放置自己选择的内容，但我无法这样做。

必须有一种方法可以从 xml 文件中获取 img，但我不知道如何。我试过看这里，但它对我不起作用..

get image out of CDATA and description tag with jquery

编辑：

在此处查看请求的 item 元素

    <item>
        <title>This is news</title>
        <link>http://website.com/blog/wordpress/this-is-news/</link>
        <comments>http://website.com/blog/wordpress/this-is-news/#comments</comments>
        <pubDate>Wed, 2 Jun 2013 05:12:12 +0000</pubDate>
        <dc:creator><![CDATA[Website]]></dc:creator>
                <category><![CDATA[Uncategorized]]></category>

        <guid isPermaLink="false">http://www.website.com/blog/wordpress/?p=22</guid>
        <description><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div>
<div>This is news this is news this is news this is news this is news.</div>
<p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></description>
                <content:encoded><![CDATA[<div style="margin: 5px 5% 10px 5%;"><img src="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="90%" /></div><div><p>This is news this is news this is news this is news this is news.</p>
</div><p>The post <a rel="nofollow" href="http://website.com/blog/wordpress/this-is-news/">This is news</a> appeared first on <a rel="nofollow" href="http://website.com/blog/wordpress">website.com</a>.</p>
]]></content:encoded>
            <wfw:commentRss>http://website.com/blog/wordpress/this-is-news/feed/</wfw:commentRss>
        <slash:comments>0</slash:comments>
    <enclosure url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" length="174264" type="image/jpg" />
<media:content xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" medium="image" type="image/jpeg">
    <media:copyright>website.com</media:copyright>
</media:content>
<media:thumbnail xmlns:media="http://search.yahoo.com/" url="http://website.com/blog/wordpress/wp-content/uploads/2014/10/image.jpg" width="640" height="640" />
    </item>

已解决：

替换

var image = x[i].getElementsByTagName("img")[0].childNodes[0].nodeValue;

对于

var img = $(x[i]).find('enclosure').attr('url');

（你应该添加 jQuery 库）

【问题讨论】：

XML 很奇怪。放置一个完整的元素。
我已经添加了，查看编辑。
好的。你确定它是一个有效的 XML 吗？在您的 Wordpress 模板中有 jQuery？要检查是否存在，您可以打开控制台并在浏览器上输入jQuery。
我想是的，它来自 wordpress。是的 jQuery 在我的主题中可用，但这并不重要，我正在本地开发函数。

标签： javascript xml wordpress tags rss

【解决方案1】：

把xml写在一个js变量里然后就得用了：

var myXML = ....
var split1 = myXML.split('url="');
...
..
.

或者你使用 jQuery。

【讨论】：

【解决方案2】：

试试这个代码，而不是你的：

在 Wordpress 中：

var image_URLs = [];
$.ajax({
    url : "news.xml",
    //async : false, //uncomment fot sync use
    success : function(data){
        data = $(data);
        data.find("item").each(function(i){

            var URL = $(this).find("enclosure").attr("url");
            console.log ("img n#"+ i + ":",URL);
            image_URLs.push(URL);
        });
    },
    error : function(a,b,c){
        console.log(a,b,c);
    }
});

查看浏览器的控制台，看看 jQuery 解析 XML 是否有错误，或者脚本是否找到了你的图像。

本地：

<html>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var image_URLs = [];
    $.ajax({
        url : "/news.xml",
    //async : false, //uncomment fot sync use
        success : function(data){
            data = $(data);
            data.find("item").each(function(i){

                var URL = $(this).find("enclosure").attr("url");
                console.log ("img n#"+ i + ":",URL);
                image_URLs.push(URL);
            });
        },
        error : function(a,b,c){
            console.log(a,b,c);
        }
    });
    </script>
</body>
</html>

如果您想离线使用 jQuery，请下载此源：`//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js`

【讨论】：

我有完全一样的，但什么也没发生。
不只是没有。 “本地”下的整个代码应该给出结果，对吗？或者我必须添加/替换它吗？
...如果/news.xml 正确链接，那么所有本地都应该可以正常工作。我的代码替换了你的。
奇怪的是我什么也没得到。但仍然感谢您的努力！我会进一步研究它以获得更多关于 JavaScript 的知识，也许我会让它工作。
我的错...所以我在这里，如果你需要的话。

在 Wordpress 中：

本地：

如果您想离线使用 jQuery，请下载此源：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

如果您想离线使用 jQuery，请下载此源：`//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js`