jQuery load body of a page

Question

I am trying to load a page's body just like here: jQuery: Load body of page into variable.

However, in this thread no one provided a working solution because $.load() cuts off the <!DOCTYPE>, <html> and <body> tag by default (afaik). I chose the $.get() method and I already got the page's entire content as a string, but now I am not able to get just the <body> tag (or rather: what's inside the <body> tag).

So far I have tried:

$.get(uri, function(data){
console.log(data); // --> the entire page's content is logged
});

$.get(uri, function(data){
console.log($(data)); // --> i guess that's the entire site as an object
});

$.get(uri, function(data){
console.log($(data).find("body")); // --> this should be the <body> tag as an object, but console just outputs "[ ]"
});

You can't include inline html tags in your questions without surrounding them by the single quote shared with your tilde key. — mrtsherman, Dec 30 '11 at 15:00

score 4 · Accepted Answer · edited May 23 '17 at 10:08

Explanation

Hm.. let's see if I can properly demonstrate this.

$.get() is a shorthand for $.ajax().

So when you do this

$.get(uri, function(data){
    console.log(data); // --> the entire page's content is logged
});

You're really doing this

$.ajax({
    url: uri,
    type: "GET",
    success: function(msg){
        console.log(msg);
    }
});

And by default, it returns the page as HTML. Or rather, by default, it first checks the MIME-type on the page, and if none is found, it returns HTML. If you want to tell it what you would like to return, you can either do it in the MIME-type on the server page, or you could use $.getJSON()

If you want the data returned from your request in form of an object, JSON is the way to go. The only real difference in the code, really, is

replace your $.get() with $.getJSON()

$.getJSON(uri, function(data){
    console.log(JSON.stringify(data));
});

or

add dataType: "json" in the $.ajax()

$.ajax({
    url: uri,
    type: "GET",
    dataType: "json",
    success: function(data){
        console.log(JSON.stringify(data));
    }
});

so it can expect JSON data to be returned from the page.

Now all you need to do is prepare the data on the server side, using json_encode()

$output = array(
    "msg" => "This is output", 
    "data" => array(
        "info" => "Spaaaace", 
        "cake" => "no"
    ), 
    array(
        "foo", 
        "bar"
    )
);
echo json_encode($output); 
//it will look like this before the text is parsed into JSON in Javascript
//{"msg":"This is output","data":{"info":"Spaaaace","cake":"no"},"0":["foo","bar"]}

This is the way to go if you want objects returned from a request.

Solution

Apart from server-side fix with the json_encode(), this is the solution.

$.getJSON(uri, function(data){
    console.log(JSON.stringify(data)); 
});

Alternative solution

Assuming you want to keep your $.get() All you need is the text between <body> and </body> Here's an example

$.get(uri, function(msg){
    var startWith = "<body>",
        endWith = "</body>";
    var iStart = msg.search(startWith);
    var iEnd = msg.search(endWith);

    msg= msg.substring(iStart+startWith.length, iEnd)
    console.log(msg);
});

And here's a more advanced answer on that one.

wow thank you very much for this detailed answer, not it works! :) (sadly i cant vote you up cause i need more reputation :S) — Peter, Dec 30 '11 at 22:03

Paul Grime · Answer 2 · 2011-12-30T22:31:56.577

jQuery will trim off the html and body tags. For example in Firebug:

$("<html><body><div id=id000><div id=id001>content</div></div></body></html>")

results in:

[div#id000]

and clicking on that in the Firebug console shows this:

<div id="id000">
    <div id="id001">content</div>
</div>

So you shouldn't need to find the body tag yourself, as the only content left will be that which was inside the original body tag.

EDIT BASED ON COMMENT:

Maybe some simple parsing is required beforehand to remove the <head> element. The following assumes you are only interested in the content that follows a <body> tag.

// try and find the body start tag
var match = /<body/gi.exec(loadedContent);
if (match.length > 0) {
    // if found, trim the loadedContent
    loadedContent = loadedContent.substring(match.index);
}
// jQuery will do the rest
var $content = $(loadedContent);

for loadedContent as:

<html><head><title>title</title></head><body><div id=id000><div id=id001>content</div></div></body></html>

this gives the same <div> elements as above, i.e. the <title> tag is not used.

but just the tags --> if the loaded content looks like this: [code i dont want to be loaded again]... it loads the head and everything that's inside as well :/ (but i dont want all scripts to get loaded again) — Peter, Dec 30 '11 at 22:06

score 0 · Answer 3 · answered Dec 30 '11 at 15:07

0

You can try reading the HTML data as XML instead.

$.get(uri, function(data){
   console.log($(data).find("body"));
}, 'xml');

answered Dec 30 '11 at 15:07

gen_Eric

223,194
41
299
337

score 0 · Answer 4 · answered Dec 30 '11 at 15:08

0

Did you try ?

$.get(uri, function(data) {

   console.log('<body>' + data.contents().find('html body').html() + '</body>');

});

answered Dec 30 '11 at 15:08

Jules

7,148
6
26
50

doesn't work either (nothing is logged at all), but thanks for the suggestion ;) – Peter Dec 30 '11 at 22:10

jQuery load body of a page

4 Answers4

Explanation

Solution

Alternative solution