स्ट्रिंग के रूप में संपूर्ण दस्तावेज़ HTML कैसे प्राप्त करें?

236

क्या एक टैग के रूप में HTML टैग के भीतर संपूर्ण HTML प्राप्त करने के लिए JS में एक तरीका है ?

document.documentElement.??
javascript  html  document  tostring 
— फ़्लैश
स्रोत
10
एकमात्र सही उत्तर: stackoverflow.com/questions/817218/… ( इनर-वोटिंग इनर / बाहरी HTML उत्तरों को रोकें, वे संपूर्ण स्रोत प्रदान नहीं करते! )
— जॉन
2
document.body.parentElement.innerHTML
— रेडवॉल्फ प्रोग्राम्स
@ जो वे प्रदान नहीं करते हैं?
— ब्लूजैके

जवाबों:

319

MS ने outerHTMLऔर जोड़ाinnerHTMLकुछ समय पहले गुण ।

एमडीएन के अनुसार , outerHTMLफ़ायरफ़ॉक्स 11, क्रोम 0.2, इंटरनेट एक्सप्लोरर 4.0, ओपेरा 7, सफारी 1.3, एंड्रॉइड, फ़ायरफ़ॉक्स मोबाइल 11, आईई मोबाइल, ओपेरा मोबाइल और सफारी मोबाइल में समर्थित है। outerHTMLमें है डोम पार्सिंग और क्रमबद्धता विनिर्देश।

आपके लिए क्या काम करेगा इसके लिए ब्राउज़र संगतता के लिए quirksmode देखें । सभी समर्थन करते हैं innerHTML।

var markup = document.documentElement.innerHTML;
alert(markup);
— कॉलिन बर्नेट
स्रोत
28
बाहरी HTML का सिद्धांत नहीं मिलता है।
— CMCDragonkai
2
एक जादू की तरह काम किया! धन्यवाद! क्या कोई तरीका है जो किसी भी / सभी फाइलों के आकार को दस्तावेज़ से जुड़ा हुआ है और साथ ही साथ js और css फाइलें भी प्राप्त करता है?
— www139
@CMCDragonkai: आप सिद्धांत को अलग से प्राप्त कर सकते हैं और इसे मार्कअप स्ट्रिंग पर भेज सकते हैं । आदर्श नहीं, मुझे पता है, लेकिन संभव है।
— माइक ब्रांस्की
76

तुम कर सकते हो

new XMLSerializer().serializeToString(document)

IE 9 की तुलना में नए ब्राउज़र में

Https://caniuse.com/#feat=xml-serializer देखें

— एरिक Aigner
स्रोत
5
यह तारीख / समय टिकटों के अनुसार पहला सही उत्तर था । पृष्ठ के कुछ हिस्सों जैसे कि XML घोषणा शामिल नहीं होगी और अन्य "उत्तर" का उपयोग करते समय ब्राउज़र कोड में हेरफेर करेंगे। यह एकमात्र ऐसा पद है जिसे मतदान किया जाना चाहिए (तीन दिन बाद डॉस पोस्ट किया गया)। लोगों को ध्यान देने की जरूरत है!
— जॉन
2
यह पूरी तरह से सही नहीं है क्योंकि यह serializeToString HTML एन्कोड करता है। उदाहरण के लिए, यदि आपके कोड में "टाइम्स न्यू रोमन", टाइम्स जैसे शैलियों को परिभाषित करने वाले फ़ॉन्ट हैं, तो सीरीफ कोट्स को html एन्कोडेड मिलेगा। शायद यह आप में से कुछ के लिए महत्वपूर्ण नहीं है, लेकिन मेरे लिए यह है ...
— मार्को
3
@ जॉन अच्छी तरह से ओपी वास्तव में " HTML टैग्स के भीतर संपूर्ण HTML" के लिए पूछता है । और कॉलिन बर्नेट द्वारा चयनित सर्वश्रेष्ठ उत्तर इसे प्राप्त करता है। इस विशेष उत्तर (एरिक) में html टैग और सिद्धांत शामिल होंगे। उस ने कहा, यह पूरी तरह से मेरे लिए किसी न किसी हीरे में था और वास्तव में मैं क्या देख रहा था! आपकी टिप्पणी ने भी मदद की क्योंकि इसने मुझे इस उत्तर के साथ अधिक समय बिताया, इसलिए धन्यवाद :)
— evanrmurphy
2
मुझे लगता है कि लोगों को इस एक के साथ सावधान रहना चाहिए, विशेष रूप से क्योंकि यह एक मूल्य देता है जो वास्तविक HTML नहीं है जो आपके ब्राउज़र को प्राप्त होता है। मेरे मामले में, इसने उस htmlटैग की विशेषताओं को जोड़ा जो सर्वर ने वास्तव में कभी नहीं भेजा :(
— onassar
1
यह हर ब्राउज़र में समर्थित है। यह खराब ब्राउज़र समर्थन कैसे है?
— एरिक एग्नर
44

मेरा मानना ​​है document.documentElement.outerHTML कि आपके लिए यह वापस आना चाहिए।

एमडीएन के अनुसार , outerHTMLफ़ायरफ़ॉक्स 11, क्रोम 0.2, इंटरनेट एक्सप्लोरर 4.0, ओपेरा 7, सफारी 1.3, एंड्रॉइड, फ़ायरफ़ॉक्स मोबाइल 11, आईई मोबाइल, ओपेरा मोबाइल और सफारी मोबाइल में समर्थित है। outerHTMLमें है डोम पार्सिंग और क्रमबद्धता विनिर्देश।

outerHTMLसंपत्ति नोटों पर MSDN पृष्ठ जो IE 5+ में समर्थित है। कॉलिन का उत्तर W3C quirksmode पृष्ठ से जुड़ा हुआ है, जो क्रॉस-ब्राउज़र संगतता (अन्य DOM विशेषताओं के लिए भी) की एक अच्छी तुलना प्रदान करता है।

— Noldorin
स्रोत
सभी ब्राउज़र इसका समर्थन नहीं करते हैं।
— कॉलिन बर्नेट
@ कोलिन: हाँ, अच्छी बात है। अनुभव से, मुझे याद है कि IE 6+ और फ़ायरफ़ॉक्स दोनों इसे सपोर्ट करते हैं, हालाँकि आपके द्वारा लिंक किए गए quirksmode पृष्ठ से अन्यथा पता चलता है ...
— Noldorin
फ़ायरफ़ॉक्स OuterHTML का समर्थन नहीं करता है। यह IE स्वामित्व है। developer.mozilla.org/En/…
— जेसी डियरिंग
4
क्या doctype और html टैग सहित सब कुछ प्राप्त करने का एक तरीका है?
— trusktr
1
मेरा पहला था, वास्तव में। : पी
— नोल्डोरिन
40

मैंने विभिन्न उत्तरों को देखने की कोशिश की कि क्या लौटा है। मैं Chrome के नवीनतम संस्करण का उपयोग कर रहा हूं।

सुझाव document.documentElement.innerHTML;लौट आया<head> ... </body>

गेबी का सुझाव document.getElementsByTagName('html')[0].innerHTML;वही लौटा।

सुझाव document.documentElement.outerHTML;वापस आ गया <html><head> ... </body></html> जो 'सिद्धांत' के अलावा सब कुछ है।

आप document.doctype; इस ऑब्जेक्ट के साथ doctype ऑब्जेक्ट पुनः प्राप्त कर सकते हैं , न कि एक स्ट्रिंग, इसलिए यदि आपको HTML5 तक और इसमें शामिल सभी डॉक्यूमेंट के लिए स्ट्रिंग्स के रूप में विवरण निकालने की आवश्यकता है, तो यह यहां वर्णित है: स्ट्रिंग के रूप जावास्क्रिप्ट के साथ स्ट्रिंग के साथ HTML का डॉक टाइप प्राप्त

मैं केवल एचटीएमएल 5 चाहता था, इसलिए निम्नलिखित मेरे लिए संपूर्ण दस्तावेज बनाने के लिए पर्याप्त था:

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

— paulo62
स्रोत
6
यह सबसे पूर्ण उत्तर है और इसे स्वीकार किया जाना चाहिए। 2016 तक, ब्राउज़र संगतता पूरी हो गई है, और इसका विस्तार से उल्लेख करना (जैसा कि वर्तमान में स्वीकृत उत्तर में है) अब आवश्यक नहीं है।
— दान डैस्कलेस्क्यू
10

आप भी कर सकते हैं:

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

आपको Doctype या html टैग नहीं मिलेगा, लेकिन बाकी सब ...

— हकान
स्रोत
5 
document.documentElement.outerHTML
— ब्रायन कैंपबेल
स्रोत
1
सभी ब्राउज़र इसका समर्थन नहीं करते हैं।
— कॉलिन बर्नेट
2
फ़ायरफ़ॉक्स 11, क्रोम 0.2, इंटरनेट एक्सप्लोरर 4.0, ओपेरा 7, सफारी 1.3, एंड्रॉइड, फ़ायरफ़ॉक्स मोबाइल 11, आईई मोबाइल, ओपेरा मोबाइल और सफारी मोबाइल ( एमडीएन ) में समर्थित है । outerHTMLमें है डोम पार्सिंग और क्रमबद्धता विनिर्देश।
— XP1
कॉलिन का जवाब अधिक विस्तृत है।
— दान डैस्कलेस्क्यू
4

पूरी तरह से केवल IE:

>     webBrowser1.DocumentText

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 MIGHT के सामान्य "Save As" -Dialog पेज की वर्तमान स्थिति को नहीं बचाते हैं, बल्कि मूल रूप से लोड किए गए X / h / tml-source-text को !! (कुछ अस्थायी फ़ाइल के लिए एसएस का पोस्ट-अप और इससे पहले किए गए बदलाव / संपादन के साथ एक बड़े स्रोत-पाठ को पुनर्निर्देशित किया जा सकता है।)

यद्यपि FF "बैक" पर अच्छी रिकवरी से आश्चर्यचकित है और "सहेजें (as) ..." पर राज्यों / मूल्यों का एक NICE समावेश इनपुट-जैसे FIELDS, टेक्सारिया इत्यादि के लिए , न कि संतोषप्रद / designMode में तत्वों पर।

यदि एक xhtml- सम्मान नहीं है। xml- फ़ाइल (माइम-प्रकार, केवल फ़ाइल नाम-विस्तार नहीं!), एक appr को सेट करने के लिए 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

एक्स (ht) एमएल के प्रश्नों के लिए तटस्थ, एक "दृश्य-स्रोत: http: // ..." के प्रयास के रूप में src-attrib के मूल्य के रूप में (लिपि-निर्मित!) Iframe, - iframes का उपयोग करने के लिए- FF में दस्तावेज़:

<iframe-elementnode>.contentDocument, appr के लिए google "mdn contentDocument" देखें। सदस्यों, उदाहरण के लिए 'textContent' की तरह। 'उस साल पहले और इसके लिए क्रॉल करना पसंद नहीं था। यदि अभी भी तत्काल आवश्यकता है, तो यह उल्लेख करें, कि मुझे गोता लगाने के लिए मिला ...

— करने योग्य
स्रोत
1

का उपयोग करें document.documentElement।

इसी सवाल का जवाब यहां दिया गया: https://stackoverflow.com/a/7289396/2164160

— वीर इं
स्रोत
यह प्रश्न इस एक डुप्लिकेट के रूप में बहुत अधिक बंद होना चाहिए, जो बहुत पुराना है। वैसे भी, दिलचस्प हिस्सा यह है कि आपको ज़रूरत है .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}`)
    }
}

मैंने 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
}

— Gerben
स्रोत
0

मैं हमेशा उपयोग करता हूं

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

शायद सही तरीका नहीं है लेकिन जब मैं इसे देख सकता हूं तो मैं इसे समझ सकता हूं।

— गैबी डे वाइल्ड
स्रोत
यह गलत है क्योंकि यह <html...>टैग वापस नहीं करेगा ।
— दान डस्कलेस्क्यू
0

मुझे बस 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>
स्निपेट का विस्तार करें

— 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> नोड सहित

— milevyo
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.