Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Копирование элемента (https://javascript.ru/forum/dom-window/85560-kopirovanie-ehlementa.html)

Dmitriy154 22.10.2023 16:13

Копирование элемента
 
Вопрос, при сохранении (при помощи outerHTML) определенного html узла в буфер обмена и его последующей вставкой в редактор, теряется разметка (отсупы, переносы строк), фрагмент кода вставляется сплошной строкой. А я бы хотел сохранить код с разметкой, например, как это делает инспектор chrome. Подскажите, как реализовать? Спасибо!

voraa 22.10.2023 17:21

Теряться разметка не должна.
Что было, какие переносы, какие пробелы и табуляции - все должно остаться.
А если надо форматировать неформатированный код, то придется самому писать программу.
Типа prettier в VS Code.

Dmitriy154 22.10.2023 17:44

Как я понимаю, outerHTML сохраняет все с разметкой. Но я данные outerHTML передаю в функцию save(expotr_html.outerHTML, 'export.html'):
function save(text, name) {
    const a = document.body.appendChild(Object.assign(document.createElement('a'), {
      href: URL.createObjectURL(new Blob([text])),
      download: name || 'file.html',
      style: 'position:absolute;top:-9999px;right:-9999px;clip:rect(0,0,0,0)'
    }));
    a.click();
    URL.revokeObjectURL(a.href);
    a.remove();
}

Получается где-то в функции разметка исчезает, где-то в blob?

voraa 22.10.2023 17:59

Цитата:

Сообщение от Dmitriy154
Получается где-то в функции разметка исчезает, где-то в blob?

Не может быть такого

<div>
	
	<h3>Теряться разметка не должна!</h3> 
	<p>
		Что было, какие переносы, какие пробелы и табуляции - все должно остаться.
	<p>
		А если надо форматировать неформатированный код, то придется самому писать программу.
		Типа <span>prettier</span> в <span>VS Code</span>.
	</p>
</div>
<script>
	function save(text, name) {
		const a = document.body.appendChild(Object.assign(document.createElement('a'), {
		  href: URL.createObjectURL(new Blob([text])),
		  download: name || 'file.html',
		  style: 'position:absolute;top:-9999px;right:-9999px;clip:rect(0,0,0,0)'
		}));
		a.click();
		URL.revokeObjectURL(a.href);
		a.remove();
	}

	const div = document.querySelector('div');
	save(div.outerHTML);
</script>

Dmitriy154 22.10.2023 21:04

Насчет программы не совсем понял (, т.е. программа сама расставляет необходимые переносы строк в конце тегов?. Не могли бы вы пояснить. я нашел ошибку, у меня сам по себе код html формируется без знаков переноса строк и табуляции и, соответственно, он мне так и отдается... Теперь думаю, может и вправду сделать скрипт, который принимает сплошную строку и добавляет знаки \n и \t, только как это реализовать? ставить знак переноса строки после закрывающегося тега, а как же с табуляцией.... (мысли вслух)

Dmitriy154 22.10.2023 21:18

Нашел быстрый способ, в Notepad нажимаем 4 клавиши одновременно: cntrl + alt + shift + B. И фсё!


Часовой пояс GMT +3, время: 02:25.