如何获得整个文档HTML作为字符串?

在JS中是否有一种方法可以在HTML标签中获取整个HTML，作为字符串?

document.documentElement.??

当前回答

还可以获取<html>…</html>，最重要的是<!DOCTYPE……>声明，你可以遍历文档。childNodes，将它们转换为字符串:

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}`)
    }
}

我把这段代码作为document-outerhtml发布在npm上。

注意上面的代码依赖于doctypeToString函数;它的实现可以如下所示(下面的代码以doctype-to-string的形式发布在NPM上):

function doctypeToString(doctype) {
    if (doctype === null) {
        return ''
    }
    // Checking with instanceof DocumentType might be neater, but how to get a
    // reference to DocumentType without assuming it to be available globally?
    // To play nice with custom DOM implementations, we resort to duck-typing.
    if (!doctype
        || doctype.nodeType !== doctype.DOCUMENT_TYPE_NODE
        || typeof doctype.name !== 'string'
        || typeof doctype.publicId !== 'string'
        || typeof doctype.systemId !== 'string'
    ) {
        throw new TypeError('Expected a DocumentType')
    }
    const doctypeString = `<!DOCTYPE ${doctype.name}`
        + (doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : '')
        + (doctype.systemId
            ? (doctype.publicId ? `` : ` SYSTEM`) + ` "${doctype.systemId}"`
            : ``)
        + `>`
    return doctypeString
}

2018-07-13 09:28:13

其他回答

你还可以:

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

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

2011-06-16 14:04:01

我只需要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>

例子

2019-01-09 11:06:43

我相信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在DOM解析和序列化规范中。

outerHTML属性上的MSDN页面指出IE 5+支持它。Colin的回答链接到W3C quirksmode页面，该页面很好地比较了跨浏览器兼容性(也有其他DOM特性)。

2009-05-03 14:36:20

正确的做法其实是:

webBrowser1。DocumentText

2010-10-29 15:05:31

如果你想获取DOCTYPE之外的所有内容，这将有效:

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

如果你想要doctype也可以这样:

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

2021-05-26 11:18:22

如何获得整个文档HTML作为字符串?

推荐文章

最新文章

标签