3

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.

Thomas
  • 33,544
  • 126
  • 357
  • 626

5 Answers5

5

try something like this : 

$(vhtml).find('#foo');
gion_13
  • 41,171
  • 10
  • 96
  • 108
4

Try this

var divHtml = $(vhtm).find("#foo").html();
Tim Rogers
  • 21,297
  • 6
  • 52
  • 68
1

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

digi
  • 2,719
  • 1
  • 14
  • 17
  • 2
    [Parsing HTML with regex summons tainted souls into the realm of the living.](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) – shesek Aug 18 '11 at 09:07
  • I see your point, but my example still works if he's not stuffing his
    with a truckload of complex code ;)
     – digi Aug 18 '11 at 09:16
  • 1
    What about another `
    ` inside that div? Its not 'truckload of complex code', but it'll still break it.
     – shesek Aug 18 '11 at 09:26
0

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

shesek
  • 4,584
  • 1
  • 28
  • 27
  • 1
    Note that `$(document.createElement('div'))` is equal to `$('
    ')`.     – Aleksi Yrttiaho Aug 18 '11 at 08:09
  • 2
    It does the same thing, but its [35% slower](http://jsperf.com/jquery-dom-creation-html-vs-createlement). You seriously down-voted the answer because of that? – shesek Aug 18 '11 at 08:15
  • 1
    Not for that. The solution is overly complicated in this case. The difference seems to be 25 % with the [complete code](http://jsperf.com/parse-html-with-jquery) in favour of the pure jquery version. The performance difference here is largely irrelevant though. – Aleksi Yrttiaho Aug 18 '11 at 08:37
  • 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. – Kieron Aug 18 '11 at 08:37
  • 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. – shesek Aug 18 '11 at 08:52
0

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);
Henry
  • 2,187
  • 1
  • 15
  • 28