Làm cách nào để lấy toàn bộ tài liệu HTML dưới dạng chuỗi?

236

Có cách nào trong JS để lấy toàn bộ HTML trong các thẻ html , dưới dạng một chuỗi không?

document.documentElement.??
javascript  html  document  tostring 
— TheFlash
nguồn
10
Câu trả lời đúng duy nhất: stackoverflow.com/questions/817218/, ( dừng trả lời các câu trả lời bên trong / bên ngoài, họ KHÔNG cung cấp toàn bộ nguồn! )
— John
2
document.body.parentElement.innerHTML
— Chương trình Redwolf
@ John không cung cấp những gì?
— bluejayke

Câu trả lời:

319

MS đã thêm outerHTMLvà innerHTMLcác thuộc tính một thời gian trước đây.

Theo MDN , outerHTMLđược hỗ trợ trong Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile và Safari Mobile. outerHTMLnằm trong đặc tả DOM Parsing và serialization .

Xem quirksmode để tương thích trình duyệt để biết những gì sẽ làm việc cho bạn. Tất cả hỗ trợ innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— Colin Burnett
nguồn
28
bên ngoàiHTML không nhận được loại tài liệu.
— CMCDragonkai
2
làm việc như người ở! cảm ơn bạn! Có cách nào để có được kích thước của bất kỳ / tất cả các tệp được liên kết với tài liệu cũng như các tệp js và css không?
— www139 17/03/2015
@CMCDragonkai: Bạn có thể lấy tài liệu riêng biệt và thêm nó vào chuỗi đánh dấu. Không lý tưởng, tôi biết, nhưng có thể.
— Mike Branski
76

Bạn có thể làm

new XMLSerializer().serializeToString(document)

trong các trình duyệt mới hơn IE 9

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

— Erik Aigner
nguồn
5
Đây là câu trả lời đúng đầu tiên theo tem ngày / giờ. Các phần của trang như khai báo XML sẽ không được đưa vào và các trình duyệt sẽ thao tác mã khi sử dụng các "câu trả lời" khác. Đây là bài đăng duy nhất nên được bình chọn (dos được đăng ba ngày sau đó). Mọi người cần chú ý!
— Giăng
2
Điều này không hoàn toàn chính xác vì nó serializeToString thực hiện mã hóa HTML. Ví dụ: nếu mã của bạn chứa các kiểu xác định phông chữ như "Times New Roman", Times, serif các trích dẫn sẽ được mã hóa html. Có lẽ điều đó không quan trọng với một số bạn nhưng với tôi nó là ...
— Marko
3
@ John cũng thực sự OP yêu cầu "toàn bộ HTML trong các thẻ html". Và câu trả lời tốt nhất được lựa chọn bởi Colin Burnett đã đạt được điều này. Câu trả lời cụ thể này (Erik's) sẽ bao gồm các thẻ html và doctype. Điều đó nói rằng, đây hoàn toàn là một viên kim cương thô đối với tôi và chính xác những gì tôi đang tìm kiếm! Nhận xét của bạn cũng có ích vì nó khiến tôi dành nhiều thời gian hơn cho câu trả lời này, vì vậy cảm ơn :)
— evanrmurphy
2
Tôi nghĩ mọi người nên cẩn thận với cái này, cụ thể vì nó trả về một giá trị không phải là html thực tế mà trình duyệt của bạn nhận được. Trong trường hợp của tôi, nó đã thêm các thuộc tính vào htmlthẻ mà máy chủ không bao giờ thực sự gửi :(
— onassar
1
Nó được hỗ trợ trong mọi trình duyệt. Làm thế nào là hỗ trợ trình duyệt kém này?
— Erik Aigner
44

Tôi tin rằng document.documentElement.outerHTMLnên trả lại cho bạn.

Theo MDN , outerHTMLđược hỗ trợ trong Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile và Safari Mobile. outerHTMLnằm trong đặc tả DOM Parsing và serialization .

Trang MSDN trên thuộc outerHTMLtính lưu ý rằng nó được hỗ trợ trong IE 5+. Câu trả lời của Colin liên kết đến trang quirksmode W3C, cung cấp một so sánh tốt về khả năng tương thích trình duyệt chéo (đối với các tính năng DOM khác).

— Noldorin
nguồn
Không phải tất cả các trình duyệt hỗ trợ này.
— Colin Burnett
@Colin: Vâng, điểm tốt. Từ kinh nghiệm, tôi dường như nhớ rằng cả IE 6+ và Firefox đều hỗ trợ nó, mặc dù trang quirksmode mà bạn liên kết gợi ý khác ...
— Noldorin
Firefox không hỗ trợ OuterHTML. Nó là độc quyền của IE. developer.mozilla.org/En/
— Kẻ
4
Có cách nào để lấy mọi thứ kể cả doctype và các thẻ html không?
— trusktr
1
Của tôi là đầu tiên, thực sự. : P
— Noldorin
40

Tôi đã thử các câu trả lời khác nhau để xem những gì được trả lại. Tôi đang sử dụng phiên bản Chrome mới nhất.

Đề nghị document.documentElement.innerHTML;trả lại<head> ... </body>

Gợi ý của Gaby document.getElementsByTagName('html')[0].innerHTML;cũng như vậy.

Gợi ý document.documentElement.outerHTML;trả về <html><head> ... </body></html> đó là tất cả mọi thứ ngoài 'doctype'.

Bạn có thể truy xuất đối tượng doctype bằng document.doctype; Điều này trả về một đối tượng, không phải là một chuỗi, vì vậy nếu bạn cần trích xuất các chi tiết dưới dạng chuỗi cho tất cả các loại tài liệu lên đến và bao gồm cả HTML5 thì nó được mô tả ở đây: Lấy DocType của HTML dưới dạng chuỗi bằng Javascript

Tôi chỉ muốn HTML5, vì vậy những điều sau đây là đủ để tôi tạo toàn bộ tài liệu:

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

— paulo62
nguồn
6
Đây là câu trả lời đầy đủ nhất và nên được chấp nhận. Kể từ năm 2016, khả năng tương thích trình duyệt đã hoàn tất và việc đề cập chi tiết về nó (như trong câu trả lời hiện được chấp nhận) không còn cần thiết nữa.
— Dan Dascalescu 17/2/2016
10

Bạn cũng có thể làm:

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

Bạn sẽ không nhận được thẻ Doctype hoặc html, nhưng mọi thứ khác ...

— Hakan
nguồn
4

VẤN ĐỀ CHỈ IE:

>     webBrowser1.DocumentText

cho FF tăng từ 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));

có thể làm việc trong FF. (Hiển thị 300 ký tự RẤT ĐẦU TIÊN từ đầu RẤT của văn bản nguồn, chủ yếu là doctype-defs.)

NHƯNG hãy lưu ý rằng "Lưu dưới dạng" bình thường của FF MIGHT KHÔNG lưu trạng thái hiện tại của trang, thay vào đó là văn bản X / h / tml-source-text được tải chính thức !! (POST-up của ss với một số tệp tạm thời và chuyển hướng đến đó có thể cung cấp một văn bản nguồn có thể hiểu được với các thay đổi / chỉnh sửa trước đó được thực hiện cho nó.)

Mặc dù FF gây bất ngờ bằng cách phục hồi tốt ở "mặt sau" và bao gồm các trạng thái / giá trị của NICE trên "Lưu (dưới dạng ...)" cho FIELDS giống như đầu vào, textarea , v.v., không phải trên các yếu tố trong nội dung / designMode ...

Nếu KHÔNG phải là xhtml- resp. xml-file (loại mime, KHÔNG chỉ là tên tệp mở rộng!), người ta có thể sử dụng document.open/write/c Đóng để cài đặt appr. nội dung cho lớp nguồn, sẽ được lưu trên hộp thoại lưu của người dùng từ tệp tin / Lưu tệp FF. xem: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

Trung lập với các câu hỏi của X (ht) ML, hãy thử "nguồn xem: http: // ..." làm giá trị của src-attrib của iframe (được tạo bởi tập lệnh!), - để truy cập vào iframe- tài liệu trong FF:

<iframe-elementnode>.contentDocument, xem google "mdn contentDocument" cho appr. các thành viên, như 'textContent' chẳng hạn. 'Có những năm trước và không thích bò cho nó. Nếu vẫn còn cần gấp, hãy đề cập đến điều này, rằng tôi phải lặn trong ...

— liều
nguồn
1

Để nhận được những thứ bên ngoài <html>...</html>, quan trọng nhất là <!DOCTYPE ...>khai báo, bạn có thể đi qua document.childNodes, biến mỗi thứ thành một chuỗi:

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

Tôi đã xuất bản mã này dưới dạng document-outshtml trên npm .

chỉnh sửa Lưu ý mã ở trên phụ thuộc vào một chức năng doctypeToString; việc thực hiện của nó có thể như sau (mã dưới đây được xuất bản vào npm dưới dạng 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
}

— Gerben
nguồn
0

Tôi luôn luôn sử dụng

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

Có lẽ không phải là cách đúng đắn nhưng tôi có thể hiểu nó khi tôi nhìn thấy nó.

— gaby de wilde
nguồn
Điều này là không chính xác bởi vì nó sẽ không trả lại <html...>thẻ.
— Dan Dascalescu 17/2/2016
0

Tôi chỉ cần html doctype và sẽ hoạt động tốt trong IE11, Edge và Chrome. Tôi đã sử dụng mã dưới đây nó hoạt động tốt.

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

và trong thẻ neo của bạn sử dụng như thế này.

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

Thí dụ

    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>
Mở rộng đoạn trích

— kiranvj
nguồn
0

Tôi đang sử dụng outerHTMLcho các yếu tố ( <html>thùng chứa chính ) và XMLSerializercho bất kỳ thứ gì khác bao gồm <!DOCTYPE>, các nhận xét ngẫu nhiên bên ngoài <html>thùng chứa, hoặc bất cứ thứ gì khác có thể ở đó. Có vẻ như khoảng trắng không được bảo tồn bên ngoài <html>phần tử, vì vậy tôi sẽ thêm các dòng mới theo mặc định 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));
Mở rộng đoạn trích

— Sam Watkins
nguồn
-2

Bạn phải lặp lại thông qua tài liệu conNodes và nhận nội dungHTML bên ngoài.

trong VBA nó trông như thế này

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

bằng cách này, cho phép bạn lấy tất cả các thành phần của trang web bao gồm nút <! DOCTYPE> nếu nó tồn tại

— milevyo
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.