'Retrieving the <img> tag inside of cdata

I know what's the meaning of CDATA. But what I wanted for help is if someone could give me the right javascript for getting the img tag inside rrs cdata, please check below content.

My xml file;

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

Script that I'm following (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>');
      }
    }

The whole script:

(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>
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->

<head>
    <title>YRSS Demo</title>
    
    <!--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>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source