How to get the entire document HTML as a string?

JavascriptHtmlDocumentTostring

Javascript Problem Overview

Is there a way in JS to get the entire HTML within the html tags, as a string?

document.documentElement.??

Javascript Solutions

Solution 1 - Javascript

MS added the outerHTML and innerHTML properties some time ago.

According to MDN, outerHTML is supported in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile, and Safari Mobile. outerHTML is in the DOM Parsing and Serialization specification.

See quirksmode for browser compatibility for what will work for you. All support innerHTML.

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

Solution 2 - Javascript

You can do

new XMLSerializer().serializeToString(document)

in browsers newer than IE 9

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

Solution 3 - Javascript

I believe document.documentElement.outerHTML should return that for you.

According to MDN, outerHTML is supported in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile, and Safari Mobile. outerHTML is in the DOM Parsing and Serialization specification.

The MSDN page on the outerHTML property notes that it is supported in IE 5+. Colin's answer links to the W3C quirksmode page, which offers a good comparison of cross-browser compatibility (for other DOM features too).

Solution 4 - Javascript

I tried the various answers to see what is returned. I'm using the latest version of Chrome.

The suggestion document.documentElement.innerHTML; returned <head> ... </body>

Gaby's suggestion document.getElementsByTagName('html')[0].innerHTML; returned the same.

The suggestion document.documentElement.outerHTML; returned <html><head> ... </body></html> which is everything apart from the 'doctype'.

You can retrieve the doctype object with document.doctype; This returns an object, not a string, so if you need to extract the details as strings for all doctypes up to and including HTML5 it is described here: https://stackoverflow.com/questions/6088972/get-doctype-of-an-html-as-string-with-javascript

I only wanted HTML5, so the following was enough for me to create the whole document:

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

Solution 5 - Javascript

You can also do:

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

You will not get the Doctype or html tag, but everything else...

Solution 6 - Javascript

document.documentElement.outerHTML

Solution 7 - Javascript

PROBABLY ONLY IE:

>     webBrowser1.DocumentText

for FF up from 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));

may work in FF. (Shows up the VERY FIRST 300 characters from the VERY beginning of source-text, mostly doctype-defs.)

BUT be aware, that the normal "Save As"-Dialog of FF MIGHT NOT save the current state of the page, rather the originallly loaded X/h/tml-source-text !! (a POST-up of ss to some temp-file and redirect to that might deliver a saveable source-text WITH the changes/edits prior made to it.)

Although FF surprises by good recovery on "back" and a NICE inclusion of states/values on "Save (as) ..." for input-like FIELDS, textarea etc. , not on elements in contenteditable/ designMode...

If NOT a xhtml- resp. xml-file (mime-type, NOT just filename-extension!), one may use document.open/write/close to SET the appr. content to the source-layer, that will be saved on user's save-dialog from the File/Save menue of FF. see: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Neutral to questions of X(ht)ML, try a "view-source:http://..." as the value of the src-attrib of an (script-made!?) iframe, - to access an iframes-document in FF:

<iframe-elementnode>.contentDocument, see google "mdn contentDocument" for appr. members, like 'textContent' for instance. 'Got that years ago and no like to crawl for it. If still of urgent need, mention this, that I got to dive in ...

Solution 8 - Javascript

document.documentElement.innerHTML

Solution 9 - Javascript

To also get things outside the <html>...</html>, most importantly the <!DOCTYPE ...> declaration, you could walk through document.childNodes, turning each into a string:

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

I published this code as document-outerhtml on npm.

edit Note the code above depends on a function doctypeToString; its implementation could be as follows (code below is published on npm as doctype-to-string):

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
}

Solution 10 - Javascript

I always use

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

Probably not the right way but I can understand it when I see it.

Solution 11 - Javascript

Use document.documentElement.

Same Question answered here: https://stackoverflow.com/a/7289396/2164160

Solution 12 - Javascript

I just need doctype html and should work fine in IE11, Edge and Chrome. I used below code it works fine.

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');
	}
}

and in your anchor tag use like this.

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

Example

    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>

Solution 13 - Javascript

I am using outerHTML for elements (the main <html> container), and XMLSerializer for anything else including <!DOCTYPE>, random comments outside the <html> container, or whatever else might be there. It seems that whitespace isn't preserved outside the <html> element, so I'm adding newlines by default with 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));

Solution 14 - Javascript

This would work if you want to get everything outside the DOCTYPE:

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

or this if you want the doctype too:

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

Solution 15 - Javascript

You have to iterate through the document childNodes and getting the outerHTML content.

in VBA it looks like this

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

using this, allows you to get all elements of the web page including < !DOCTYPE > node if it exists

Solution 16 - Javascript

The correct way is actually:

webBrowser1.DocumentText

Categories
Recommended Javascript Solutions
Recommended Html Solutions
Recommended Document Solutions
Recommended Tostring Solutions

Previous Solution:

Why the switch statement cannot be applied on strings?

C++StringSwitch Statement

Next Solution:

What is the difference between Serializable and Externalizable in Java?

JavaSerializationSerializableExternalizable

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRobin RodricksView Question on Stackoverflow
Solution 1 - JavascriptColin BurnettView Answer on Stackoverflow
Solution 2 - JavascriptEraView Answer on Stackoverflow
Solution 3 - JavascriptNoldorinView Answer on Stackoverflow
Solution 4 - Javascriptpaulo62View Answer on Stackoverflow
Solution 5 - JavascriptHakanView Answer on Stackoverflow
Solution 6 - JavascriptBrian CampbellView Answer on Stackoverflow
Solution 7 - JavascriptdosView Answer on Stackoverflow
Solution 8 - JavascriptcherouvimView Answer on Stackoverflow
Solution 9 - JavascriptGerbenView Answer on Stackoverflow
Solution 10 - Javascriptgaby de wildeView Answer on Stackoverflow
Solution 11 - JavascriptVeer EnView Answer on Stackoverflow
Solution 12 - JavascriptkiranvjView Answer on Stackoverflow
Solution 13 - JavascriptSam WatkinsView Answer on Stackoverflow
Solution 14 - JavascriptUsername NameView Answer on Stackoverflow
Solution 15 - JavascriptmilevyoView Answer on Stackoverflow
Solution 16 - JavascriptDamianoView Answer on Stackoverflow