Як отримати весь HTML-код документа у вигляді рядка?

236

Чи є спосіб у JS отримати весь HTML у тегах html у вигляді рядка?

document.documentElement.??
javascript  html  document  tostring 
— TheFlash
джерело
10
Єдина правильна відповідь: stackoverflow.com/questions/817218/… ( зупиніть голосування на внутрішніх / зовнішніх відповідях HTML, вони НЕ надають всього джерела! )
— Іван,
2
document.body.parentElement.innerHTML
— Програми Redwolf
@John, що вони не надають?
— bluejayke

Відповіді:

319

MS додав outerHTMLі innerHTMLвластивості деякий час тому.

За даними MDN , outerHTMLвін підтримується в 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 для розбору та серіалізації .

Дивіться quirksmode щодо сумісності веб-переглядачів, що буде працювати для вас. Вся підтримка innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— Колін Бернетт
джерело
28
externalHTML не отримує вчення.
— CMCDragonkai
2
працював як шарм! спасибі! чи є спосіб отримати розмір будь-якого / всіх файлів, пов’язаних із документом, а також файлів js та css?
— www139
@CMCDragonkai: Ви можете отримати тип документа окремо і додати його до рядка розмітки. Я не знаю, ідеально, але можливо.
— Майк Бранскі
76

Ви можете зробити

new XMLSerializer().serializeToString(document)

у браузерах, новіших за IE 9

Дивіться https://caniuse.com/#feat=xml-serializer

— Ерік Егнер
джерело
5
Це була перша правильна відповідь за марками дати / часу. Частини сторінки, такі як декларація XML, не включатимуться, і браузери будуть маніпулювати кодом під час використання інших "відповідей". Це єдиний пост, за який слід голосувати (дос опублікований через три дні). Людям потрібно звернути увагу!
— Іван
2
Це не зовсім правильно, оскільки serializeToString виконує HTML-кодування. Наприклад, якщо ваш код містить стилі, що визначають шрифти, такі як "Times New Roman", Times, serif, лапки будуть кодуватися html. Можливо, це не важливо для когось із вас, але для мене це ...
— Марко
3
@John добре, що ОП насправді просить "весь HTML в HTML-тегах". І обрана найкраща відповідь Коліна Бернетта цього досягає. Ця конкретна відповідь (Еріка) буде містити html-теги та вчення. Це сказало, що це був цілком алмаз у грубій для мене і саме те, що я шукав! Ваш коментар теж допоміг, тому що змусив більше часу витрачати на цю відповідь, тож дякую :)
— evanrmurphy
2
Я думаю, що люди повинні бути обережні з цим, зокрема, тому що він повертає значення, яке не є фактичним html, який отримує ваш браузер. У моєму випадку він додав атрибути до htmlтегу, які сервер ніколи фактично не надсилав :(
— onassar
1
Він підтримується у кожному браузері. Як ця погана підтримка браузера?
— Ерік
44

я вірю document.documentElement.outerHTML має повернути вам.

За даними MDN , outerHTMLвін підтримується в 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специфікації .

Сторінка MSDN на outerHTMLвластивості зазначає, що вона підтримується в IE 5+. Відповідь Коліна посилається на сторінку Quirksmode W3C, яка пропонує хороше порівняння сумісності між браузерами (і для інших функцій DOM).

— Нолдорін
джерело
Не всі браузери це підтримують.
— Колін Бернетт
@Colin: Так, добре. З досвіду, я, мабуть, пам’ятаю, що і IE 6+, і Firefox підтримують це, хоча сторінка, в яку ви пов’язали химерність, ви посилаєтесь на інше ...
— Noldorin
Firefox не підтримує OuterHTML. Це власність IE. developer.mozilla.org/En/…
— Jesse Dearing
4
Чи є спосіб отримати все, включаючи doctype і html-теги?
— trusktr
1
Насамперед був мій. : P
— Нолдорін
40

Я спробував різні відповіді, щоб побачити, що повернуто. Я використовую останню версію Chrome.

Пропозиція document.documentElement.innerHTML;повернулася<head> ... </body>

Пропозиція Габі document.getElementsByTagName('html')[0].innerHTML;повернула те саме.

Пропозиція document.documentElement.outerHTML;повернулася <html><head> ... </body></html> - це все, крім «доктрипу».

Ви можете отримати об’єкт doctype за допомогою document.doctype; цього повертає об’єкт, а не рядок, тому, якщо вам потрібно витягнути деталі у вигляді рядків для всіх типів до та включаючи HTML5, це описано тут: Отримайте DocType HTML як рядок з Javascript

Я хотів лише HTML5, тому мені було достатньо наступного, щоб створити весь документ:

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

— paulo62
джерело
6
Це найповніша відповідь і її слід прийняти. Станом на 2016 рік сумісність браузера завершена, і детально згадувати про це (як у прийнятій на даний момент відповідь) більше не потрібно.
— Дан Даскалеску
10

Ви також можете зробити:

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

Ви не отримаєте тег Doctype або html, а все інше ...

— Хакан
джерело
5 
document.documentElement.outerHTML
— Брайан Кемпбелл
джерело
1
Не всі браузери це підтримують.
— Колін Бернетт
2
Підтримується в Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile і Safari Mobile ( MDN ). outerHTMLзнаходиться в специфікації DOM для розбору та серіалізації .
— XP1
Відповідь Коліна більш детальна.
— Дан Даскалеску
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));

може працювати у ФФ. (Показує ДУЖЕ ПЕРШИХ 300 символів від ДУЖЕ початку початку вихідного тексту, переважно доктіфів.)

Але врахуйте, що звичайний "Зберегти як" -Діалог FF НЕ МОЖЕ зберегти поточний стан сторінки, скоріше спочатку завантажений X / h / tml-source-text !! (POST-ups ss до деякого temp-файлу та переадресація до нього може доставити збережений вихідний текст З попередньо внесеними до нього змінами / правками.)

Хоча FF дивує хорошим відновленням на "назад" та NICE включенням станів / значень у "Зберегти (як) ..." для вхідних полів, textarea тощо, а не на елементи в contenteditable / designMode ...

Якщо НЕ xhtml- відповідно. xml-файл (тип mime, НЕ просто розширення імені файлу!), можна використовувати document.open/write/close для встановлення програми. вміст у вихідний рівень, який буде збережено у діалоговому вікні збереження користувача з меню Файл / Зберегти FF. див .: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite респ.

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

Нейтрально до запитань X (ht) ML, спробуйте "view-source: http: // ..." як значення src-attrib (iframe !?) iframe, - для доступу до iframes- документ у ФФ:

<iframe-elementnode>.contentDocument, див. google "mdn contentDocument" для програми. членів, наприклад, "textContent", наприклад. "Зрозумів, що років тому, і не люблю повзати за цим. Якщо все-таки нагальна потреба, згадайте про це, що я повинен зануритися в ...

— дос
джерело
1

Використовуйте document.documentElement.

На те саме запитання відповіли тут: https://stackoverflow.com/a/7289396/2164160

— Veer En
джерело
Це питання має бути закритим, оскільки це дублікат цього, який набагато старший. У будь-якому разі, цікава частина полягає в тому, що вам потрібно .outerHTMLі отримати document.doctype, і найповніша відповідь - це Паоло .
— Дан Даскалеску
1

Щоб також отримати речі поза <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}`)
    }
}

Я опублікував цей код як document-externalhtml у npm.

редагувати Примітка. Код, наведений вище, залежить від функції doctypeToString; його реалізація може бути наступною (код нижче публікується в npm як 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
}

— Гербен
джерело
0

Я завжди користуюся

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

Можливо, це не правильний шлях, але я можу це зрозуміти, коли бачу.

— gaby de wilde
джерело
Це неправильно, оскільки він не поверне <html...>тег.
— Дан Даскалеску
0

Мені просто потрібний HTML-файл doctype, і він повинен добре працювати в 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>
Розгорніть фрагмент

— kiranvj
джерело
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));
Розгорніть фрагмент

— Сем Уоткінс
джерело
-2

Ви повинні переглядати документ дочірніх вузлів і отримання зовнішнього вмісту HTML.

у VBA це виглядає приблизно так

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

використовуючи це, ви можете отримати всі елементи веб-сторінки, включаючи вузол <! DOCTYPE>, якщо він існує

— милевіо
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.