Получение HTML-документа в виде строки с JavaScript

Быстрый ответ

Хотите управлять магией JavaScript? Если вам требуется перевести целую HTML страницу в одну строку, воспользуйтесь document.documentElement.outerHTML:

// Просто и легко!
let htmlString = document.documentElement.outerHTML;

Если же вам необходимо включить в эту строку объявление DOCTYPE, следующий код поможет справиться с этой задачей:

// Совмещаем со вступлением DOCTYPE!
let doctype = new XMLSerializer().serializeToString(document.doctype);
let completeHTML = doctype + "\n" + document.documentElement.outerHTML;

И вот — перед вами полный HTML вашего документа.

В поисках смысла в HTML-строке

HTML браузером воспринимается как динамическое DOM-дерево, полное жизни. Но, когда мы применяем document.documentElement.outerHTML, живой документ превращается в статичный текст.

const htmlFrozenInTime = document.documentElement.outerHTML;

Исследование XMLSerializer

Давайте более подробно рассмотрим XMLSerializer. Это мощный инструмент, способный преобразовывать DOM в строку, ни в коем случае не обходя стороной экзотические элементы, такие как SVG или MathML.

let serializer = new XMLSerializer();
let htmlStringInTechnicolor = serializer.serializeToString(document);

Сохранение DOCTYPE

Крайне важно сохранять объявление DOCTYPE для правильного отображения страницы в требуемом режиме – стандартном или совместимости.

// DOC, оставайся со мной!
let doctypeStr = document.doctype ? new XMLSerializer().serializeToString(document.doctype) : '';
let htmlPreservingItsRoots = doctypeStr + document.documentElement.outerHTML;

Теперь ваша строка содержит полноценный HTML-документ с DOCTYPE.

Проверьте ваш браузер

Технологии не стоит на месте; удостоверьтесь, что outerHTML и XMLSerializer работают в вашем браузере. Для этого вам пригодятся ресурсы типа MDN или CanIUse.

Визуализация

Возьмите к примеру игру "Полный HTML в кармане". Схватить всю разметку страницы в виде строки – это как заморозить момент во времени на фотографии.

// Скажите "сыр"! 📸
const htmlSnapshot = document.documentElement.outerHTML;

Взгляните на это таким образом:

🏗️ Здание: [Фундамент, Стены, Окна, Крыша]
📸 Снимок: "Постройка улавливается в строке"

Готово! У вас в руках черно-белый план вашего сайта.

Распространенные ошибки

Замороженный HTML – это лишь момент, который не способен показать динамичность страницы. Вот что может уйти из поля зрения:

• Скрипты: Не дайте им уйти незамеченными, ведь их не видно в строковой версии HTML.

• Пользовательский ввод: Если пользователь что-то вводил, эти данные в замороженной строке не появятся.

Веб-скрейпинг: осторожнее

HTML-строкой можно воспользоваться для веб-скрейпинга. Но помните о законе и политике конфиденциальности сайтов.

Отладка с использованием всплывающих окон

Если вам быстро необходимо что-то проверить, можно использовать alert:

// Давай все, браузер!
alert(document.documentElement.outerHTML);

Будто вы заставляете ваш JavaScript раскрыть все тайны HTML-страницы.

Полезные материалы

1. Document: свойство documentElement – Web API | MDN — информация MDN о documentElement.
2. JavaScript DOM Document — все о DOM Document API от W3Schools.
3. Как получить весь HTML документа в виде строки? – Stack Overflow — обсуждение вопроса на Stack Overflow.
4. XMLSerializer – Web API | MDN — руководство по использованию XMLSerializer от MDN.
5. HTML Standard — документация HTML от WHATWG.
6. Кроссбраузерная сериализация JSON в JavaScript – SitePoint — пособие по работе с JSON-сериализацией в JavaScript.
7. .html() | jQuery API Documentation — функция .html() для поклонников jQuery.