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