CODEWITHSUNDEEP
jquery
Petah
Petah

Reputation: 46050

jQuery select body element from string

I have a string <html><head></head><body>test</body></html> and I'm trying to get just the contents of the body using jQuery.

Ive tried

$('<html><head></head><body>test</body></html>').find('body').html();

but that doesn't work.

Any ideas on how to do it?

Edit:

In case it wasn't clear, I need to get the body element from a string, not the DOM.

Edit 2:

Be aware that the method used needs to not return anything form the head element. Such as inline styles.

Upvotes: 5

Views: 6092

Answers (9)

user3140579
user3140579

Reputation: 1

I had the same issue. My solution was to replaceAll('body>','xbody>') in my string and then I could use $(mystring).find('xbody')

Hope this helps.

Upvotes: 0

user120242
user120242

Reputation: 15268

Assuming that your HTML string is valid strict XML and you are using jQuery 1.5, you can use the $.parseXML function.

$($.parseXML('<html><head></head><body><div>test</div></body></html>'))
.find("body").contents()

Upvotes: 1

Hussein
Hussein

Reputation: 42818

var x = '<html><head></head><body>test</body></html>';
x = x.split("<body")[1].split(">").slice(1).join(">").split("</body>")[0];
alert(x);

Check working example at http://jsfiddle.net/6hPHn/1/

Upvotes: 8

Jeff B
Jeff B

Reputation: 30099

jQuery throws out the <html>/<head>/<body> tags. If you had any nested elements, those would be parsed:

$('<html><head></head><body><div>test</div></body></html>').find('body').html();

Will give you "test", because after parsing, you have a div element. Calling .html() returns the html in the div.

A quick hack to get the body then would be:

var tmp = $('<div></div>').append('<html><head></head><body>test</body></html>');

console.log(tmp.html());

EDIT:

After reading your update about head elements... If you want a hack, just regex out the body. And before you attack, I know, regex is not meant to parse html, but in this case, we assume there should be only one set of body tags, and those tags should be fairly simple.

Basically, I replaced everything up to the <body> tag with <div id="hack"> and everything fromto the end of the string with`.

Example: http://jsfiddle.net/m79tv/

Upvotes: 0

alex
alex

Reputation: 490203

It doesn't seem to like that sort of HTML being passed into the jQuery functions, possibly because html is the parent element of a HTML document.

It even doesn't work using native DOM API...

var a = document.createElement('div');
a.innerHTML = '<html><head></head><body>test</body></html>';
console.log(a.innerHTML); // test

jsFiddle of difference between your string and others.

You could use a regular expression...

var str = '<html><head></head><body class="here is some classes">test\ntesty</body></html>';
str = str.replace(/^.*?<body.*?>([\s\S]*?)<\/body>.*?$/, '$1');
console.log(str); // test

jsFiddle.

Upvotes: 2

RustyTheBoyRobot
RustyTheBoyRobot

Reputation: 5945

My guess is that what you are wanting to accomplish would be easiest with a regex.

var html = $("#htmlInput").val();  //Grab what's in your textbox
html = html.replace(/.*<body[ A-Za-z0-9\="'\(\);]*>/i, "");
html = html.replace(/<\/body>.*/i, "");

This regex should be able to strip out everything but the contents of the body tags, even if there are attributes in the body tag.

Upvotes: -2

Groovetrain
Groovetrain

Reputation: 3325

I agree with @RustyTheBoyRobot's answer, using RegEx would work best. It would be far faster than using jQuery to create all of those DOM elements anyway. Try something like this:

var html_page_string = '<html><head></head><body>test</body></html>';
var matches = html_page_string.match(/<body>(.*)<\/body>/ig);

The text you want should be in matches[1]

EDIT

For some reason, removing the g flag seemed to make it group correctly so that the string was in matches[1]:

var matches = html_page_string.match(/<body>(.*?)<\/body>/i);

Upvotes: 2

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

never tried using <body>

i usually load a #ID element, just like

$('#where').load('file/path.php?bla?ble=bli #ID');

If this doesn't help, sorry, i didn't get your point..

by the way, for your exaple would work if:

<html><head></head><body><div id="ID">test</div></body></html>

if it helps..

Upvotes: 0

niczak
niczak

Reputation: 3917

I would use the .contents() method.

HTML:

<html>
    <head><title>Test</title></head>
    <body>Test</body>
</html>

JS:

var s = contents('body');
document.write(s);

^-- outputs "Test".

See it working here.

Upvotes: 0

Related Questions