admin管理员组

文章数量:1394774

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 0
Add a ment  | 

4 Answers 4

Reset to default 3

Why 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();
});
  1. get the content with "html" selector
  2. make a copy with clone
  3. find the tags you want to remove
  4. remove them and
  5. 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 :)

本文标签: