如何将整个文档HTML作为字符串？

时间：2009-05-03 14:34:06

标签： javascript html document tostring

JS是否有办法将 html 标记中的整个HTML作为字符串获取？

document.documentElement.??

16 个答案:

答案 0 :(得分：273)

MS在不久前添加了outerHTML和innerHTML属性。

根据MDN，Firefox 11，Chrome 0.2，Internet Explorer 4.0，Opera 7，Safari 1.3，Android，Firefox Mobile 11，IE Mobile，Opera Mobile和Safari Mobile均支持outerHTML 。 outerHTML符合DOM Parsing and Serialization规范。

有关适用于您的内容的浏览器兼容性，请参阅quirksmode。所有支持innerHTML。

var markup = document.documentElement.innerHTML;
alert(markup);

答案 1 :(得分：53)

你可以做到

new XMLSerializer().serializeToString(document)
在比IE 9更新的浏览器中

请参阅https://caniuse.com/#feat=xml-serializer

答案 2 :(得分：40)

我相信document.documentElement.outerHTML应该为你返回。

根据MDN，Firefox 11，Chrome 0.2，Internet Explorer 4.0，Opera 7，Safari 1.3，Android，Firefox Mobile 11，IE Mobile，Opera Mobile和Safari Mobile均支持outerHTML 。 outerHTML符合DOM Parsing and Serialization规范。

outerHTML property上的MSDN页面指出IE 5+支持它。 Colin的答案链接到W3C quirksmode页面，该页面提供了跨浏览器兼容性的良好比较（对于其他DOM功能）。

答案 3 :(得分：34)

我尝试了各种答案以查看返回的内容。我正在使用最新版本的Chrome。

建议document.documentElement.innerHTML;返回<head> ... </body>

Gaby的建议document.getElementsByTagName('html')[0].innerHTML;返回了同样的内容。

建议document.documentElement.outerHTML;返回<html><head> ... </body></html> 除了“doctype”之外，这是一切。

您可以使用document.doctype;检索doctype对象。这将返回一个对象，而不是字符串，因此如果您需要将详细信息作为字符串提取到包括HTML5在内的所有文档类型，请在此处进行描述：{{3 }}

我只想要HTML5，所以以下内容足以让我创建整个文档：

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

答案 4 :(得分：9)

你也可以这样做：

document.getElementsByTagName('html')[0].innerHTML

你不会得到Doctype或html标签，但其他一切......

答案 5 :(得分：5)

document.documentElement.outerHTML

答案 6 :(得分：4)

可能只有IE：

>     webBrowser1.DocumentText

表示FF从1.0开始：

//serialize current DOM-Tree incl. changes/edits to ss-variable
var ns = new XMLSerializer();
var ss= ns.serializeToString(document);
alert(ss.substr(0,300));

可能在FF中有效。 （从源文本的非常开始，显示非常第一个300个字符，主要是doctype-defs。）

但请注意，正常的＆＃34;另存为＆＃34; -Dialog of FF MIGHT NOT保存页面的当前状态，而不是原始加载的X / h / tml-source-text !! （将ss张贴到某个临时文件并重定向到该文件可能会提供一个可保存的源文本，其中包含之前所做的更改/编辑。）

尽管FF在＆＃34;回归＆＃34;并且NICE包含状态/值＆＃34;保存（as）...＆＃34; 用于类似输入的FIELDS，textarea 等，而不是在contenteditable / designMode中的元素...

如果不是xhtml- resp。 xml-file（mime-type，而不仅仅是filename-extension！），可以使用document.open/write/close来设置appr。内容到源层，将从FF的文件/保存菜单保存在用户的保存对话框中。 看到： http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp。

https://developer.mozilla.org/en-US/docs/Web/API/document.write

对X（ht）ML的问题保持中立，试试＆＃34; view-source：http：//..."作为（脚本制作的！？）iframe的src-attrib的值， - 访问FF中的iframes文档：

<iframe-elementnode>.contentDocument，请参阅google＆＃34; mdn contentDocument＆＃34;对于appr。会员，比如＆text;＆＃39; textContent＆＃39;例如。 ＆＃39;多年前就没那么喜欢爬行了。如果仍然迫切需要，请提一下，我要潜入......

答案 7 :(得分：2)

document.documentElement.innerHTML

答案 8 :(得分：1)

如果您想获取 DOCTYPE 之外的所有内容，这将起作用：

document.getElementsByTagName('html')[0].outerHTML;

或者如果你也想要文档类型的话：

new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML;

答案 9 :(得分：0)

我总是使用

document.getElementsByTagName('html')[0].innerHTML

可能不是正确的方式，但是当我看到它时我能理解它。

答案 10 :(得分：0)

使用document.documentElement。

同样的问题在这里回答： https://stackoverflow.com/a/7289396/2164160

答案 11 :(得分：0)

要使事情不在PHP Warning: Cannot modify header information - headers already sent by (output started at phar:///usr/local/bin/wp/vendor/wp-cli/config-command/src/Config_Command.php(345) : eval()'d code:3) in /www/wpconf/public_html/core/wp-includes/pluggable.php on line 1210 （最重要的是<html>...</html>声明）之外，您可以遍历document.childNodes，将它们转换为字符串：

<!DOCTYPE ...>

我在npm上以document-outerhtml的身份发布了此代码。

edit 注意，以上代码取决于函数const html = [...document.childNodes] .map(node => nodeToString(node)) .join('\n') // could use '' instead, but whitespace should not matter. function nodeToString(node) { switch (node.nodeType) { case node.ELEMENT_NODE: return node.outerHTML case node.TEXT_NODE: // Text nodes should probably never be encountered, but handling them anyway. return node.textContent case node.COMMENT_NODE: return `<!--${node.textContent}-->` case node.DOCUMENT_TYPE_NODE: return doctypeToString(node) default: throw new TypeError(`Unexpected node type: ${node.nodeType}`) } } ；其实现可以如下（以下代码在npm上以doctype-to-string的形式发布）：

doctypeToString

答案 12 :(得分：0)

我只需要doctype html，就可以在IE11，Edge和Chrome中正常工作。我在下面的代码中使用了它，效果很好。

function downloadPage(element, event) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
        document.execCommand('SaveAs', '1', 'page.html');
        event.preventDefault();
    } else {
        if(isChrome) {
            element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
        }
        element.setAttribute('download', 'page.html');
    }
}

并在锚标记中这样使用。

<a href="#" onclick="downloadPage(this,event);" download>Download entire page.</a>

示例 

    function downloadPage(element, event) {
    	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    
    	if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
    		document.execCommand('SaveAs', '1', 'page.html');
    		event.preventDefault();
    	} else {
    		if(isChrome) {
                element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
    		}
    		element.setAttribute('download', 'page.html');
    	}
    }
I just need doctype html and should work fine in IE11, Edge and Chrome. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>
<a href="#" onclick="downloadPage(this,event);"  download><h2>Download entire page.</h2></a></p>

<p>Some image here</p>

<p><img src="https://placeimg.com/250/150/animals"/></p>

答案 13 :(得分：0)

您必须遍历文档childNodes并获取外部HTML内容。

在VBA中看起来像这样

For Each e In document.ChildNodes
    Put ff, , e.outerHTML & vbCrLf
Next e

使用它，可以获取网页的所有元素，包括<！DOCTYPE>节点（如果存在）

答案 14 :(得分：0)

我将outerHTML用于元素（主<html>容器），并将XMLSerializer用于其他元素，包括<!DOCTYPE>，<html>容器之外的随机注释，或其他可能的内容。似乎没有在<html>元素外部保留空格，因此默认情况下，我使用sep="\n"添加换行符。

function get_document_html(sep="\n") {
    let html = "";
    let xml = new XMLSerializer();
    for (let n of document.childNodes) {
        if (n.nodeType == Node.ELEMENT_NODE)
            html += n.outerHTML + sep;
        else
            html += xml.serializeToString(n) + sep;
    }
    return html;
}

console.log(get_document_html().slice(0, 200));

答案 15 :(得分：-8)

实际上正确的方法是：

webBrowser1.DocumentText

相关问题
最新问题