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

2020/10/10 21:41 · javascript ·  · 0评论

JS中是否有办法以字符串形式获取html标记内的整个HTML

document.documentElement.??

MS不久前添加了outerHTMLinnerHTML属性。

根据MDN的说明outerHTMLFirefox 11,Chrome 0.2,Internet Explorer 4.0,Opera 7,Safari 1.3,Android,Firefox Mobile 11,IE Mobile,Opera Mobile和Safari Mobile支持。outerHTMLDOM解析和序列化规范中。

有关适合您的浏览器的兼容性,请参见quirksmode全部支持innerHTML

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

你可以做

new XMLSerializer().serializeToString(document)

在比IE 9更高的浏览器中

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

我相信document.documentElement.outerHTML应该为您退还。

根据MDN的说明outerHTMLFirefox 11,Chrome 0.2,Internet Explorer 4.0,Opera 7,Safari 1.3,Android,Firefox Mobile 11,IE Mobile,Opera Mobile和Safari Mobile支持。outerHTMLDOM解析和序列化规范中。

outerHTML属性上的MSDN页面指出IE 5+支持它。Colin的答案链接到W3C quirksmode页面,该页面很好地比较了跨浏览器的兼容性(也适用于其他DOM功能)。

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

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

盖比的建议document.getElementsByTagName('html')[0].innerHTML;也是如此。

document.documentElement.outerHTML;返回的建议<html><head> ... </body></html>
除了'doctype'以外,都是其他
建议

您可以使用检索doctype对象,document.doctype; 这将返回一个对象,而不是字符串,因此,如果需要将详细信息以字符串的形式提取到包括HTML5在内的所有doctype ,请在此处进行描述:使用Javascript获取HTML的DocType作为字符串

我只需要HTML5,因此以下内容足以创建整个文档:

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

您也可以这样做:

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

您将不会获得Doctype或html标记,但会得到其他所有内容...

document.documentElement.outerHTML

可能只有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中使用。(从源文本的开头开始显示VERY FIRST 300个字符,主要是doctype-defs。)

但是请注意,FF的常规“另存为”对话框可能不会保存页面的当前状态,而不会保存最初加载的X / h / tml-source-text!(将ss张贴到某些临时文件并重定向到该临时文件,可能会提供可保存的源文本,以及对其进行的更改/编辑。)

尽管FF对“返回”具有良好的恢复能力感到惊讶,而对于类似输入的FIELDS,textarea等,在“保存(另存为...)”上包含状态/值的NICE却令人惊讶,但对于contenteditable / designMode上的元素却没有。

如果不是xhtml- resp。xml文件(MIME类型,而不仅仅是文件扩展名!),可以使用document.open/write/close来设置appr。内容保存到源层,这些内容将从FF的“文件/保存”菜单保存在用户的“保存”对话框中。请参阅:http :
//www.w3.org/MarkUp/2004/xhtml-faq#docwrite响应。

https://developer.mozilla.org/zh-CN/docs/Web/API/document.write

与X(ht)ML的问题无关,请尝试使用“ view-source:http:// ...”作为iscript(脚本制作!?)iframe的src-attrib的值,以访问iframe- FF中的文档:

<iframe-elementnode>.contentDocument,请参阅Google“ mdn contentDocument”以获取相关信息。成员,例如'textContent'。``那是几年前的事,并且不喜欢它爬行。如果仍然有紧急需要,请提一下,我要潜入...

document.documentElement.innerHTML

为了也使内容<html>...</html>(最重要的是<!DOCTYPE ...>声明)之外,您可以遍历document.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}`)
    }
}

在npm上将此文档发布为document-outerhtml


编辑注意上面的代码取决于一个函数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
}

使用document.documentElement

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

我总是用

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

可能不是正确的方法,但是当我看到它时便可以理解。

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

我正在使用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));

您必须遍历文档childNodes并获取externalHTML内容。

在VBA中看起来像这样

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

使用它,您可以获取网页的所有元素,包括<!DOCTYPE>节点(如果存在)

正确的方法实际上是:

webBrowser1.DocumentText

本文地址:http://javascript.askforanswer.com/ruhejiangzhenggewendanghtmlzuoweizifuchuan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!