Parse HTML with jquery

Question

suppose in a variable html is saved like

var vhtm="<div><div id='test'>zebra</div><div id='foo'>here is my many other html content</div></div>";

i want to parse the above html stored in variable with the help of jquery. i need to extract a particular div by id and including its content. the return result would like

<div id='foo'>here is my many other html content</div>

so i need to find div by id like id='foo'

please help me how to parse the above like jquery.

Answer 1

try something like this :

$(vhtml).find('#foo');

Answer 2

Try this

var divHtml = $(vhtm).find("#foo").html();

Answer 3

Since you want the output to contain the whole div including content I'd suggest you use some regular expressions :) Like this maybe:

var vhtm="<div><div id='test'>zebra</div><div id='foo'>here is my many other html content</div></div>";
var regex = /<div id='foo'>.*?<\/div>/;
alert(vhtm.match(regex));

Result:

enter image description here

• shesek: Parsing HTML with regex summons tainted souls into the realm of the living.
• digi: I see your point, but my example still works if he's not stuffing his <div id='foo'> with a truckload of complex code ;)
• shesek: What about another <div> inside that div? Its not 'truckload of complex code', but it'll still break it.

Answer 4

I don't know of any nice way to do that. I would set this as the HTML contents of an DOM element ($(document.createElement('div')).html(vhtm).find('#foo')) or create an about:blank iframe, add the HTML to it and use $(iframe.contentWindow.document.body).find(...) if it requires isolation from the page you're running the script on for some reason

• Aleksi Yrttiaho: Note that $(document.createElement('div')) is equal to $('<div />').
• shesek: It does the same thing, but its 35% slower. You seriously down-voted the answer because of that?
• Aleksi Yrttiaho: Not for that. The solution is overly complicated in this case. The difference seems to be 25 % with the complete code in favour of the pure jquery version. The performance difference here is largely irrelevant though.
• Kieron: It's often about readability, and maintainability - both are valid, but I think, provided you're only doing it one, then the string method is preferable. But +1 for the js performance proof.
• shesek: I have something along the lines of $.c=function(tagName, attrs, text) { return $(document.createElement(tagName)).attr(attrs||{}).text(text||''); } (without the useless calls to attrs() and text() when there are no arguments, but does the same thing) to make it more readable. I find that even more readable than plain HTML.

Answer 5

This should do it:

http://jsfiddle.net/HenryGarle/Vpa3q/

var vhtml="<div><div id='test'>zebra</div><div id='foo'>here is my many other html content</div></div>";
var foo = $(vhtml).find('#foo').html();
alert(foo);