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?

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? — , Feb 19 '13 at 15:27

Frédéric Hamidi · Answer 1 · 2013-02-19T15:39:33.323

6

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

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

edited Feb 19 '13 at 15:39

answered Feb 19 '13 at 15:29

Frédéric Hamidi

258,201
41
486
479

score 5 · Answer 2 · answered Dec 06 '13 at 16:14

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;

score 2 · Answer 3 · answered Feb 19 '13 at 15:32

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));

You're right, I completely forgot the additional call to `$()` around `$.parseXML()`. I updated my answer, thanks for the heads-up :) — Frédéric Hamidi, Feb 19 '13 at 15:40

score 0 · Answer 4 · answered Apr 30 '17 at 14:55

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

parse html inside cdata using jquery or javascript

4 Answers4

Linked