如何使用 JavaScript 从带有 HTML 的字符串中删除整个 HTML、HEAD 标记和 BODY 标记？答案

【问题标题】：How to remove whole HTML, HEAD tags and BODY tag from string with HTML using JavaScript?如何使用 JavaScript 从带有 HTML 的字符串中删除整个 HTML、HEAD 标记和 BODY 标记？
【发布时间】：2012-03-16 12:23:26
【问题描述】：

我有一个名为 myWebsite.html 的模板文件。它包含 HTML 模板所需的一切。所以它有 HTML、HEAD 和 BODY 标签。我想用 JavaScript 加载它并放入网站上的一个 div 中。所以我不想拥有 HTML、HEAD 和 BODY 标签。如何做到这一点？

这是我需要的原型：

$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;

我想在纯 JavaScript 中执行此操作 = NO jQUERY

【问题讨论】：

标签： javascript html

【解决方案1】：

为什么不从标签中提取信息然后使用它呢？无需获取所有信息和删除 html、head 和 body：

content = $val.getElementsByTagName('body')[0].innerHTML();

【讨论】：

+隐藏正确。这将是一个很好的解决方案，但是如果 val 是字符串，如何调用 getElementsByTagName？
这可以通过将 val 字符串转换为带有 new Element 的 dom 元素来实现。我在这里做了一个小例子：link
+Hidde 它使用 MooTools。所以这不是我正在寻找的解决方案。

【解决方案2】：

您可以使用正则表达式提取它。类似：/\<body[^>]*\>(.*)\<\/body/m - 应该返回 <BODY> 元素内的所有内容。

$val = getData('myWebsite.html');
var reg = /\<body[^>]*\>([^]*)\<\/body/m;
div.innerHTML = $val.match( reg )[1];

示例 jsFiddle 代码：http://jsfiddle.net/x4hPZ/1/

【讨论】：

hm - CR LF 是我使用的行尾。而且我在您发布的 jsFiddle 代码中也没有看到任何问题。（我在Win7 Firefox10上）你用的是什么？我认为正则表达式中的 m 标志会处理任何行尾......
好的 - 找到这篇文章：siphon9.net/loune/2011/02/… 对基于此的代码进行了更改：jsfiddle.net/czg88/2 效果更好吗？由于我无法重现该问题，我无法确认自己。
一件事：应该是 ( reg )[1] 这样才能获取正文的内容。谢谢！
啊——是的。我犯了一个愚蠢的错误。很好的收获。

【解决方案3】：

使用 jQuery 你可以这样做：

$(document).ready(function(){
    var your_content = $("html").clone().find("head,body").remove().end().html();
});

使用“html”选择器获取内容
使用clone 进行复制
find你要删除的标签
删除它们并
转换回 HTML

一条龙。

HTH，

--汉森

【讨论】：

...如果您想在没有框架的情况下工作，请参阅stackoverflow.com/questions/7869393/…...

【解决方案4】：

怎么样：

var bodyContents = htmlstring.split('<body');//no >, body could have a property
bodyContents = bodyContents[1].replace('</body>','').replace('</html>','').replace(/^.*\>/,'');

最后一个正则表达式替换删除了开始正文标记的结束>，以及所有可能的标记属性。

然而，这不是我做事的方式......如果可能的话，我会创建一个 (i)Frame 节点，将 html 加载到该框架中，然后从 body 标记中获取 innerHTML。只是一个建议。

对，iFrame方式：

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;

代码解释：http://softwareas.com/injecting-html-into-an-iframe

或 google.com 上的任何其他点击 :)

【讨论】：

嗯...这听起来像是一个解决方案，但是...第一行之后的 bodyContents 不是数组吗？还有更多……关于 iFrame……我只是不喜欢这种解决方案。有点乱。
你是对的，对不起...第二行应该是bodyContents[1] = bodyContents[1].replace(...。我不知道为什么你觉得使用临时框架的解决方案很混乱。创建一个框架，而不将其附加到当前文档，解析 html，并为您提供 JS 必须提供的所有方法来提取您需要的部分。您甚至可以在将数据用于您的站点之前对其进行操作/检查。实际上，在我看来，这是一个更好的解决方案。但是，正如我所说，这只是一个建议:)