Cannot parse HTML with jQuery

Question

I want to parse home HTML like the following using jQuery. When I'm using document it is working. But not working when using string.

Output: null

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
$str = $(document); // working
$str = $(str);      // not working
alert($str.find(".test").html());

Another method (also fails):

Output: null

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
alert($('.test',str).html());

The string I'm getting also cannot be parsed as XML as it is not a valid XHTML.

check this stackoverflow.com/questions/2453043/… and see if helps you — Ricardo Binns
– Ricardo Binns, Commented Oct 22, 2012 at 12:56

T.J. Crowder · Accepted Answer · 2012-10-22 12:56:52Z

jQuery can turn HTML fragments into trees of DOM elements, but it only does that with content elements, not html, title, head, etc. Only the things you would put inside body. So that's probably causing some trouble to start with.

The find function looks for descendant elements that match the given selector. So even if any of the top-level elements in a jQuery instance match the selector, they are not found by find. E.g.:

$('<p class="foo">foo</p>').find('.foo').length; // 0 -- none found

...because the matching element isn't a descendant. To find elements at the top level that match, use filter:

var str = "<p>This is a content</p><p class='test'>Test content</p>";
$(str).find('.test').length; // 0 -- no *descendants* found that match
$(str).filter('.test').length; // 1 -- there was one top-level element that matched

Another approach is to put all of your elements in a container, like a div, before using find:

var str = "<div><p>This is a content</p><p class='test'>Test content</p></div>";
$(str).find('.test').length; // 1 -- it was found

Michal Klouda · Accepted Answer · 2012-10-22 12:57:09Z

1

The problem is that your string contains full HTML document..

This would work:

var str = "<div><p>This is a content</p><p class='test'>Test content</p></div>";
alert($(str).find('.test').html());

answered Oct 22, 2012 at 12:57

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Comments

dfsq · Accepted Answer · 2012-10-22 13:13:38Z

1

Try this:

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
console.log($($.parseXML(str)).find('.test'));

So you parse your string as XML first.

UPD. As T.J.Crowder pointed in comments you have to be sure that your HMTL string is valid XHTML.

And using power of plain JS it could be:

var parser, xml,
    str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";

if (window.DOMParser) {
    parser = new DOMParser();
    xml = parser.parseFromString(str, "text/xml");
}
else { // IE
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = "false";
    xml.loadXML(str);
}

console.log( $(xml).find('.test') );

edited Oct 22, 2012 at 13:13

answered Oct 22, 2012 at 12:57

dfsq

193k26 gold badges244 silver badges261 bronze badges

4 Comments

T.J. Crowder Over a year ago

You don't want to try to parse HTML fragments as XML. Not unless you know they're valid XHTML. Moreover, this isn't the problem.

dfsq Over a year ago

@T.J.Crowder Probably you are right, however sometimes it can be useful.

Sukanta Paul Over a year ago

@dfsq Its good but actually the string I'm getting is from another website which is not valid XHTML. I just need to find content inside a div tag but cannot parse it to xml. Any ideas how to do this now.

dfsq Over a year ago

DOMParser can proccess even non valid HTML as far as I know.

Palpatim · Accepted Answer · 2012-10-22 12:56:45Z

0

You're so close! :) The $(document) line returns a jQuery set; you don't need to do any additional conversion on it.

$str = $(document); // working
alert($str.find(".test").html());

answered Oct 22, 2012 at 12:56

Palpatim

9,30237 silver badges45 bronze badges

1 Comment

T.J. Crowder Over a year ago

I don't think that's what he means.

harsh4u · Accepted Answer · 2012-10-22 12:58:00Z

0

Try below code:

$(str).find(".test").html();

use str variable directly...not to assign in variable..

answered Oct 22, 2012 at 12:58

harsh4u

2,6104 gold badges26 silver badges39 bronze badges

1 Comment

Niklas R Over a year ago

@harsh4u Someone may explain this logic.

Sukanta Paul · Accepted Answer · 2012-10-22 14:45:19Z

Okay, as it is not valid XHTML I cannot parse into XML. But still I got an easy silly solution to achieve what I wanted.

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";

//-- replace with document or whatever which will not conflict ---------
str = str.replace(/html>/gi,'document>');

alert($(str).find('.test').html());

Output: Test content.

May be its not a proper way. But still it works great!

Thank you @T.J. Crowder. I got the Idea from the concept jQuery can only parse HTML fragments. So, we can fake to achieve this!

Collectives™ on Stack Overflow

Cannot parse HTML with jQuery

6 Answers 6

1 Comment

Comments

4 Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

4 Comments

1 Comment

1 Comment

Comments

Linked

Related