Получить необработанный HTML-код выбранного контента, используя JavaScript

Question

Как мне получить необработанный HTML-код выбранного контента на странице, используя Javascript? Ради простоты я придерживаюсь браузеров, поддерживающих window.getSelection.

Вот пример; содержимое между | соответствует моему выбору.

<p>
    The <em>quick brown f|ox</em> jumps over the lazy <strong>d|og</strong>.
</p>

Я могу захватить и предупредить нормализованный HTML с помощью следующего Javascript.

var selectionRange = window.getSelection().getRangeAt(0);
    selectionContents = selectionRange.cloneContents(),
    fragmentContainer = document.createElement('div');
    fragmentContainer.appendChild(selectionContents);
alert(fragmentContainer.innerHTML);

В приведенном выше примере оповещенное содержимое свернет конечные элементы и вернет строку <em>ox</em> jumps over the lazy <strong>d</strong>.

Как я могу вернуть строку ox</em> jumps over the lazy <strong>d?

Answer 1

Вы должны эффективно написать свой собственный сериализатор HTML.

Начните с selectionRange.startContainer / startOffset и двигайтесь по дереву оттуда до тех пор, пока не доберетесь до endContainer / endOffset, выводя разметку HTML из узлов по мере продвижения, включая открытые теги и атрибуты при ходьбе в элемент и закрывайте теги, когда вы поднимаетесь на parentNode.

Не очень весело, особенно если в какой-то момент вам придется поддерживать совершенно другую модель IE <9 Range ... </p>

(Обратите внимание, что вы не сможете получить полностью необработанный исходный HTML-код, поскольку эта информация пропала. Только текущее дерево DOM хранится в браузере, и это означает, что такие данные, как тег регистр, порядок атрибутов, пробелы и пропущенные неявные теги будут отличаться в зависимости от источника и того, что вы получите.)

Answer 2

Глядя на API, я не думаю, что вы можете извлечь HTML без его преобразования в DocumentFragment, который по умолчанию закроет все открытые теги, чтобы сделать его действительным HTML.

См. Преобразование Range или DocumentFragment в строку для аналогичного Q.