I have a template file that is called myWebsite.html. It contains everything that HTML template needs to have. So it has HTML, HEAD and BODY tags. I want to load it with JavaScript and put into one of divs on the site. So i don't want to have the HTML, HEAD and BODY tags. How to do this?
This is a prototype of what i need to have:
$val = getData('myWebsite.html');
$val = removeHTMLHEADBODYTAGS($val); //remove these tags with everything insite, also remove the body tag but leave the contents in the body tag. Also remove the end tags of body and html - HOW TO DO THIS?
div.innerHTML = $val;
I want to do this in pure JavaScript = NO jQUERY
I have a template file that is called myWebsite.html. It contains everything that HTML template needs to have. So it has HTML, HEAD and BODY tags. I want to load it with JavaScript and put into one of divs on the site. So i don't want to have the HTML, HEAD and BODY tags. How to do this?
This is a prototype of what i need to have:
$val = getData('myWebsite.html');
$val = removeHTMLHEADBODYTAGS($val); //remove these tags with everything insite, also remove the body tag but leave the contents in the body tag. Also remove the end tags of body and html - HOW TO DO THIS?
div.innerHTML = $val;
I want to do this in pure JavaScript = NO jQUERY
Share Improve this question asked Mar 16, 2012 at 12:23 Tom SmykowskiTom Smykowski 26.2k57 gold badges165 silver badges247 bronze badges 04 Answers
Reset to default 3Why not fetch the information out of the tag and then work with that? There is no need to fetch all information and the removing html, head and body:
content = $val.getElementsByTagName('body')[0].innerHTML();
You could extract it with a regex. Something like: /\<body[^>]*\>(.*)\<\/body/m - that should return all content within the <BODY> element.
$val = getData('myWebsite.html');
var reg = /\<body[^>]*\>([^]*)\<\/body/m;
div.innerHTML = $val.match( reg )[1];
Example jsFiddle code: http://jsfiddle/x4hPZ/1/
With jQuery you could do it like this:
$(document).ready(function(){
var your_content = $("html").clone().find("head,body").remove().end().html();
});
- get the content with "html" selector
- make a copy with
clone findthe tags you want to remove- remove them and
- convert back to HTML
all in one line.
HTH,
--hennson
how about:
var bodyContents = htmlstring.split('<body');//no >, body could have a property
bodyContents = bodyContents[1].replace('</body>','').replace('</html>','').replace(/^.*\>/,'');
The last regex replace removes the closing > of the opening body tag, and all possible tag properties.
This is, however, not the way I would do things... If at all possible, I'd create an (i)Frame node, load the html into that frame, and get the innerHTML from the body tag. Just a suggestion.
Right, the iFrame way:
var document.ifrm = document.createElement('iframe')
document.ifrm.style = 'visibility:hidden';
document.body.appendChild(document.ifrm);
idoc = (document.ifrm.contentDocument ? document.ifrm.contentDocument : document.ifrm.contentWindow.document;)
idoc.open();
idoc.writeln('<html><head><title>foobar</title></head><body><p>Content</p></body></html>');
idoc.close();
var bodyContents = idoc.body.innerHTML;
For code explanation: http://softwareas./injecting-html-into-an-iframe
or any other hit on google. for that matter :)