parse html inside cdata using jquery or javascript

Question

I'm getting a website feed that looks like this

<rss...>
    <title> some title </title>
    <content>
         <![CDATA[ <div>this tag is ignored<div> who took the cookie in the cookie jar!?  ]]>
    </content>
</rss>

I need the entire content of the cdata to be displayed in the html. I'm using jquery 1.9.1 and when I get the content part using $(xml).find('rss content').text(), it actually ignores the whole <div>this tag is ignored<div> part. Any way to get everything inside the CDATA using javascript or jquery?

Balas

CDATA is meant to hide data from the parser, so that it is not parsed into the DOM as HTML. I'm trying to understand why your html is hidden in CDATA? Can you just ajax it in? – Zomba

Have you tried using html() instead of text()? – Chivalric

Answer 1

Chances are your markup is not parsed as XML by jQuery. Try explicitly invoking $.parseXML():

var contentText = $($.parseXML(xml)).find("rss content").text();

Gimpel

Answer 2

bottomline:

xmlDoc.getElementsByTagName("content")[0].childNodes[0].nodeValue

this snippet from working code uses jquery to load xml and then gets the 4th occurence of the content tag (which contains CDATA)

var req = new AjaxRequest(); 
req.setMethod("POST"); 
...
req.loadXMLDoc(linkString, paramString);
var htmlContent = req.getResponse().responseXML.getElementsByTagName('content').item(3).childNodes[0].nodeValue;

Corody

Answer 3

jQuery is not the best at parsing XML documents from a string. It would be better to use the browser's native DOM Parser. jQuery can then work with the parsed XML document much better; otherwise I believe it will try to work with it like XML which produces weird results.

$xml = $((new DOMParser).parseFromString(xml, "text/xml"));

http://jsfiddle.net/ExplosionPIlls/2MJt9/

EDIT: based on the other answer, $.parseXML is possibly a better option since it should work with other browsers, but you would have to use it in a similar fashion to the above since the result is an XML document rather than a jQuery object.

$xml = $($.parseXML(xml));

Fuddyduddy

You're right, I completely forgot the additional call to $() around $.parseXML(). I updated my answer, thanks for the heads-up :) – Fallonfallout

Answer 4

text from CDATA in jQuery can be retrieved by get first of childNodes data:

!$.ajax(YOUR_URL,{
dataType: 'xml',
success: function (dataR, textStatus, jqXHR){ 
var rrsobj = $(dataR).find('rss');
if(rrsobj ){
  desc = $(rrsobj [0]).children('content');  
  if(desc)
    var txt = desc[0].childNodes[0].data; }
}});

where dataR was read from YOUR_URL and txt contains info from CDATA

Enstatite