Question

有人可以帮助我吗，我知道CDATA的含义是什么..但我想要的帮助是，如果有人能给我正确的javascript来获取rrs cdata中的img标签，请查看以下内容。

我的xml文件......

 <content:encoded>
    <![CDATA[<div> <a> **<img />** </a> </div>  ]]>
 </content:encoded>

我正在关注的剧本（yrss.min.js）..

// provisional html result
    htmlObject = $(html);
    // if content option is true... *
    if (options.content) {
    // for each entry... *
    $.each(htmlObject, function () {
    // if image option is true... *
    if (options.image) {
    // * check for first image
    var image = $(this).find('img').first(); <<< doesn't find the img
    // if image exists... *
    if (image.length !== 0) {
    // * create image wrapper`enter code here`
    $(this).prepend('<div class="entry-image">');

    // * append first image in image wrapper and wrap all textual elements after it
    $(this).find('.entry-image').append(image).nextAll().wrapAll('<div class="entry-text"></div>');
      }
    }

先谢谢了。

-------------------------整个脚本------------------- ------

/* YRSS 1.1.2 */

（function（$）{

// use strict mode
'use strict';

$.fn.yrss = function (url, options, fn) {

    // plugin defaults
    var defaults = {
        ssl: false,
        limit: 10,
        reverse: false,
        cache: true,
        maxage: 3600,
        showerror: true,
        errormsg: '',
        tags: false,
        date: true,
        dateformat: 'default',
        titletag: 'h4',
        content: true,
        image: true,
        snippet: true,
        snippetlimit: 120,
        linktarget: '_self'
    };

    // extend options
    options = $.extend(defaults, options);

    // return function
    return this.each(function (i, e) {
        // check for ssl protocol
        var s = '';
        if (options.ssl) { s = 's'; }

        // add class to container
        if (!$(e).hasClass('rss-feed')) { $(e).addClass('rss-feed'); }

        // check for valid url
        if (url === null) { return false; }

        // create yql query
        var query = 'http' + s + '://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from feed where url="' + url + '"');

        // set limit
        if (options.limit !== null) { query += ' limit ' + options.limit; }

        // reverse feed order
        if (options.reverse) { query += ' | reverse()'; }

        // set maximum cache age
        if (options.cache) { query += '&_maxage=' + options.maxage; }

        // specify format
        query += '&format=json';

        // send request
        $.getJSON(query, function (data, status, errorThrown) {
            // if successful... *
            if (status === 'success') {
                // * run function to create html result
                process(e, data, options);

                // * optional callback function
                if ($.isFunction(fn)) { fn.call(this, $(e)); }

                // if there's an error... *
            } else if (status === 'error' || status === 'parsererror') {
                // if showerror option is true... *
                if (options.showerror) {
                    // variable scoping (error)
                    var msg;

                    // if errormsg option is not empty... *
                    if (options.errormsg !== '') {
                        // * assign custom error message
                        msg = options.errormsg;

                        // if errormsg option is empty... *
                    } else {
                        // * assign default error message
                        msg = errorThrown;
                    }

                    // * display error message
                    $(e).html('<div class="rss-error"><p>' + msg + '</p></div>');

                    // if showerror option is false... *
                } else {
                    // * abort
                    return false;
                }
            }
        });
    });
};

// create html result
var process = function (e, data, options) {
    // feed data (entries)
    var entries = data.query.results.item;

    // check if entries are not inside an array (only 1 entry)
    if (!$.isArray(entries)) { entries = [entries]; }

    // abort if no entries exist
    if (!entries) { return false; }

    // html variables
    var html = '';
    var htmlObject;

    // for each entry... *
    $.each(entries, function (i) {
        // * assign entry variable
        var entry = entries[i];

        // * variable scoping (tags)
        var tags;

        // if entry tags exist... *
        if (entry.category !== undefined) {
            // * arrange entry tags
            tags = entry.category.toString().toLowerCase().replace(/ /g, '-').replace(/,/g, ' ');
        }

        // * variable scoping (date)
        var pubDate;

        // if date option is true... *
        if (entry.pubDate) {
            // * create date object
            var entryDate = new Date(entry.pubDate);

            // * select date format
            if (options.dateformat === 'default') {
                pubDate = (entryDate.getMonth() + 1).toString() + '/' + entryDate.getDate().toString() + '/' + entryDate.getFullYear();
            } else if (options.dateformat === 'spellmonth') {
                var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                pubDate = months[entryDate.getMonth()] + ' ' + entryDate.getDate().toString() + ', ' + entryDate.getFullYear();
            } else if (options.dateformat === 'localedate') {
                pubDate = entryDate.toLocaleDateString();
            } else if (options.dateformat === 'localedatetime') {
                pubDate = entryDate.toLocaleDateString() + ' ' + entryDate.toLocaleTimeString();
            }
        }

        // * build entry
        html += '<div class="entry-wrapper"';
        if (options.tags && entry.category !== undefined) { html += 'data-tag="' + tags + '"'; }
        html += '><div class="entry-title"><' + options.titletag + '><a href="' + entry.link + '">' + entry.title + '</a></' + options.titletag + '></div>';
        if (options.date && pubDate) { html += '<div class="entry-date">' + pubDate + '</div>'; }

        // if content option is true... *
        if (options.content) {
            // * check for rss description/encoded value
            var content;
            if (entry.description !== undefined) {
                content = $.trim(entry.description);
            } else {
                content = $.trim(entry.encoded);
            }

            // * build content
            html += '<div class="entry-content">' + content + '</div>';
        }

        html += '</div>';
    });

    // provisional html result
    htmlObject = $(html);

    // if content option is true... *
    if (options.content) {
        // for each entry... *
        $.each(htmlObject, function () {
            // if image option is true... *
            if (options.image) {
                // * check for first image
                var image = $(this).find('img').first();

                // if image exists... *
                if (image.length !== 0) {
                    // * create image wrapper
                    $(this).prepend('<div class="entry-image">');

                    // * append first image in image wrapper and wrap all textual elements after it
                    $(this).find('.entry-image').append(image).nextAll().wrapAll('<div class="entry-text"></div>');
                }
            }

            // if snippet option is true... *
            if (options.snippet) {
                // * set character limit
                var content = $(this).find('.entry-content');
                var contentLength = $(content).text().length;
                content.text(function (i, v) {
                    if (contentLength === 0) {
                        return '';
                    } else if (contentLength !== 0 && contentLength <= options.snippetlimit) {
                        return v;
                    } else {
                        return v.substring(0, options.snippetlimit) + ' ...';
                    }
                });
            }
        });
    }

    // append final html result
    $(e).append(htmlObject);

    // apply target to links
    $('a', e).attr('target', options.linktarget);
};

}）（jQuery的）;

---------------------- html ------------------------

<!DOCTYPE html>

YRSS演示

<!--meta information-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="yrss.min.js"></script>

<!--styles
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">-->

<style>
    html,body {
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    background-color:#fff;
    color:#fff;
    font-family:"Montserrat", arial, sans-serif;
    font-size:100%;
    font-weight:400;
    height:100%;
    line-height:1.45;
    }

    #wrapper {
    margin:0 auto;
    max-width:1200px;
    padding:3rem 0 5rem;
    width:90%;
    }

    .rss-feed {
    -webkit-perspective:1;
    column-fill:balance;
    column-gap:2rem;
    margin:0;
    padding:0;
    }

    .entry-wrapper {
    background-color:#006b3a;
    border-radius:1px;
    display:inline-block;
    margin-bottom:2rem;
    position:relative;
    vertical-align:top;
    width:100%;
    }

    .entry-image img {
    border-radius:1px 1px 0 0;
    display:block;
    height:auto;
    max-width:100%;
    width:100%;
    }

    .entry-title h4 {
    font-size:1.5rem;
    line-height:1.2;
    }

    .entry-title h4 a {
    color:#fff;
    text-decoration:none;
    transition:color 200ms ease-in-out;
    }

    .entry-title h4 a:hover {
    color:rgba(255,255,255,.7);
    }

    .entry-title h4 a::after {
    content:"\02197";
    margin-left:.5rem;
    }

    .entry-date {
    background-color:#006b3a;
    font-size:.75rem;
    position:absolute;
    top:0;
    right:0px;
    padding:.25rem .5rem;
    border-radius:0 0 0 1px;
    }

    .entry-text {
    border-top:3px solid #00371d;
    padding:1rem;
    }

    .entry-content {
    margin:.625rem 0 0;
    }

    .entry-content:empty {
    display:none;
    }

    @media only screen and (min-width:480px) {
        .rss-feed {
        column-count:1;
        }
    }   



 </style>
</head>

<body>
<div id="wrapper">
    <div id="feed"></div>
</div>

<script>
    var feed = ' ---address rss feed--- ';
    $('#feed').yrss(feed, {
        ssl: false,
        limit: 2,
        reverse: false,
        cache: true,
        maxage: 3600,
        showerror: true,
        errormsg: '',
        tags: true,
        date: true,
        dateformat: 'spellmonth',
        titletag: 'h4',
        content: true,
        image: true,
        snippet: true,
        snippetlimit: 120,
        linktarget: '_blank'
    }, function () {
        // optional callback function
    });
</script>
</body>
</html>

检索cdata中的<img/>标记

0 个答案: