2

Hey i have an html string i'm having trouble getting the tags from.

I have tried alot of stuff, here are some :

var head = $("head",$(htmlString)).html();
var body = $("body",$(htmlString)).html();
var head = $("head",htmlString).html();
var body = $("body",htmlString).html();
var head = $("head",$(htmlString).html()).html();
var body = $("body",$(htmlString).html()).html();
var head = htmlString.match(/<head[^>]*>([^<]+)<\/head>/);
var body = htmlString.match(/<body[^>]*>([^<]+)<\/body>/);
var head = jQuery('<div/>').append(htmlString).find('head').html();
var body = jQuery('<div/>').append(htmlString).find('body').html();

Any many other tries besides that. All of this return "undefined" or "" or jquery object when i try loging it to console.

Could anyone tell me how can i get the body and head tags as a string?

Prefered with jQuery/JS and not regex

5
  • $(htmlString).find("body");?
    – sp00m
    Commented Nov 20, 2012 at 11:08
  • At least the first three work like a charm for me. So what is the problem here? Any error messages? Not the output you are expecting (if so, please show us htmlString)?
    – Andreas
    Commented Nov 20, 2012 at 11:12
  • sp00m not working and @Andreas no error messages i try login hte htmlString and see "undefined " or some object. htmlString is really long but i'm not sure the browser interpets it as string could this be related? Commented Nov 20, 2012 at 11:14
  • Show us the string please (jsfiddle.net). For your question. Just use a simple string to test <html><head><title>foo</title><body>body</body></html>
    – Andreas
    Commented Nov 20, 2012 at 11:30
  • I Added the string to the question and i tried in my code using the test html and same result. Commented Nov 20, 2012 at 11:34

5 Answers 5

18

Try Below Code:

var head = htmlString.match(/<head[^>]*>[\s\S]*<\/head>/gi);
var body = htmlString.match(/<body[^>]*>[\s\S]*<\/body>/gi);
1
  • Well this does work for me, in case i won't find a jQuery solution i'll use this, as i suspect it could fail on some cases where the body tag could contain values etc. Am i wrong? Commented Nov 20, 2012 at 11:45
5

Since you have well formed HTML, you can create a document and select nodes from it:

var doc = (new DOMParser()).parseFromString(htmlstring,"text/html");
console.log(doc.head.outerHTML);
console.log(doc.body.outerHTML);

Here is a demonstration: http://jsfiddle.net/X3Uq2/

In Chrome, you can't use a "text/html" content type, so you have to make an XML document and use getElementsByTagName:

var s = new XMLSerializer();
var doc = (new DOMParser()).parseFromString(data,"text/xml");
console.log(s.serializeToString(doc.getElementsByTagName("head")[0]));
console.log(s.serializeToString(doc.getElementsByTagName("body")[0]));

http://jsfiddle.net/X3Uq2/2/

17
  • my html is not in the document it's in a string! Commented Nov 20, 2012 at 11:18
  • @eric.itzhak Fixed, added demo Commented Nov 20, 2012 at 11:34
  • i will not always have well formed HTML, does this change anything? i have no control on what the HTML will be inside htmlString. Commented Nov 20, 2012 at 11:36
  • And this code returning "Uncaught TypeError: Cannot read property 'head' of null " though htmlString is defined! Commented Nov 20, 2012 at 11:38
  • @eric.itzhak Please post the exact code you are using to implement this. As I have demonstrated in the fiddle, this approach works. Commented Nov 20, 2012 at 11:39
1

You can use javascript slice method this way:

var html = '<!DOCTYPE html>'+
'<html>'+
  '<head>' +
    '<meta name="viewport" content="width=device-width" /> '+
    '<title></title>' +
  '</head>' +
  '<body>Some Text!</body>' +
'</html>'
var bEnd, bStart;
bStart = html.indexOf("<body");
bEnd = html.indexOf("</body");
var body = html.slice(bStart, bEnd);
console.log(body);

0
0

may be this can help you

var head = jQuery('<div/>').append(htmlString).find('head').html();

var body = jQuery('<div/>').append(htmlString).find('body').html();
1
  • Still login it gives "undefined" Commented Nov 20, 2012 at 11:24
-4

It's really simple:

JQuery: $(head)
Native js: document.head

If you wanted to get html of this tag:

In JQuery: $(head).html();
Native js: document.head.innerHtml

You find nice JQuery refernece here: http://visualjquery.com

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.