如何使用JQuery从RSS提要中提取图像?

时间:2018-07-19 23:04:26

标签: javascript jquery rss

我正在尝试在我的网站上使用RSS feed文章,但是未显示该精选图片。确实会显示标题和摘要。我刚刚开始使用javaScript,所以我不确定自己做错了什么。 提前致谢。 我正在尝试在我的网站上使用RSS feed文章,但是未显示特色图片。确实会显示标题和摘要。我刚刚开始使用javaScript,所以我不确定自己做错了什么。 预先感谢。

这是我的js代码:

jQuery(document).ready(function ($) {
$(function () {
    var $content = $('#roundupContent');
    var data = {
        rss_url: 'http://roundup.calpolycorporation.org/~api/papers/b686f300-0de4-458f-9b51-07756c12d705/rss'
    };
    $.get('https://api.rss2json.com/v1/api.json', data, function (response) {
        if (response.status == 'ok') {
            var output = '';
            $.each(response.items, function (k, item) {

                output += '<div class="post-card category-medium published">';
                //output += '<h3 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
                var tagIndex = item.description.indexOf('<media:content'); // Find where the media:content tag starts
                var urlIndex = item.description.substring(tagIndex).indexOf('url=') + tagIndex; // Find where the url attribute starts
                var urlStart = urlIndex + 5; // Find where the actual image URL starts; 5 for the length of 'url="'
                var urlEnd = item.description.substring(urlStart).indexOf('"') + urlStart; // Find where the URL ends
                var url = item.description.substring(urlStart, urlEnd); // Extract just the URL
                output += '<p class="post-meta">';
                //output += '<span class="published">' + item.pubDate + '</span>';
                output += '<a href="http://roundup.calpolycorporation.org/~api/papers/b686f300-0de4-458f-9b51-07756c12d705/rss" target="_blank">@roundup.calpolycorporation.org</span></a>';
                output += '</p>';

                output += '<h2 class="entry-title">' + item.title + '</h2>';
                //output += '<div class="post-meta"><span>By ' + item.author + '</span></div>';
                var yourString = item.description.replace(/<media:content[^>]*>/g, ""); //replace with your string.
                var maxLength = 300 // maximum number of characters to extract
                //trim the string to the maximum length
                var trimmedString = yourString.substr(0, maxLength);
                //re-trim if we are in the middle of a word
                trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))

                output += '<div class="excerpt">' + trimmedString + '</div>';
                output += '<a href="' + item.link + '" class="more-link cpc-button activeghostdark small">Read More</a>';
                output += '<a class="entry-featured-image-url" href="' + item.link + '"><img url="' + url + '"></a>';

                output += '</div>';
                return k < 1;
            });
            $content.html(output);
        }
    });
});
});

这是RSS提要代码的一部分

     <?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        <generator>Paper.li RSS generator</generator>
        <title>Cal Poly Corporation Roundup</title>
        <link>https://paper.li/CPCorporation/1478016962</link>
        <atom:link href="http://roundup.calpolycorporation.org/~api/papers/b686f300-0de4-458f-9b51-07756c12d705/rss" rel="self" type="application/rss+xml"></atom:link>
        <description>Cal Poly, the CSU and higher education news from around the web</description>
        <image>
            <url>https://s3.amazonaws.com/avatars.paper.li/paper_avatars/492d64db-5677-41cb-a438-f3f19399d6bb/9rdccload70ueqtiyvna/0315_CPC_PaperliRoundup_Skin_v1_PaperThumbnail2.png</url>
            <title>Cal Poly Corporation Roundup</title>
            <link>https://paper.li/CPCorporation/1478016962</link>
        </image>
        <ttl>180</ttl>
        <pubDate>Fri, 13 Jul 2018 21:25:48 +0000</pubDate>
        <lastBuildDate>Fri, 13 Jul 2018 21:25:48 +0000</lastBuildDate>
        <item>
            <title>Freshman SLO Days | New Student &amp; Transition Programs</title>
            <link>https://orientation.calpoly.edu/student-life-orientation-days/2016-schedule</link>
            <description>&lt;p&gt;&lt;strong&gt;orientation.calpoly.edu&lt;/strong&gt; - Wondering how to get started with SLO Days? Follow these steps to secure your spot and begin the first part of your Cal Poly journey! Accept your Offer of Admission from Cal Poly through your Cal Pol…&lt;/p&gt;&lt;br/&gt;Tweeted by @CPPrezArmstrong https://twitter.com/CPPrezArmstrong/status/1015631541530234881</description>
            <guid isPermaLink="false">0c5e1132-71e2-492d-a327-cdef80d0fd32</guid>
            <category>Leisure</category>
            <media:content url="https://content-calpoly-edu.s3.amazonaws.com/orientation/1/images/our-team/orientation-team/freshmanSloDays_0.jpg" medium="image"></media:content>
            <pubDate>Sat, 07 Jul 2018 16:20:03 +0000</pubDate>
        </item>
    </channel>
</rss>

0 个答案:

没有答案