В div#q1 contenteditable у меня есть текст и выглядит на экране он так:
строка1
строка2
строка3
Но в коде это выглядит так:
<div id="q1" contenteditable="true">
строка1
<div>строка2</div>
<div>строка3</div>
</div>
Иногда может так:
<div id="q1" contenteditable="true">
строка1
<br>
строка2
<br>
строка3
</div>
А бывает вообще вперемешку div и br да ещё и вложенные
Когда я делаю document.querySelector('#q1').textContent
то получаю текст без переносов
Если я делаю document.querySelector('#q1').innerHTML
то могу заменить все <br>
на перенос \n
но как быть если у меня помимо br есть переносы с помощью div
Я пробовал перед и после всех div ставить br
div[i].insertAdjacentHTML('beforebegin', '<br>');
div[i].insertAdjacentHTML('afterend', '<br>');
но в этом случае получаются лишние переносы.
Есть ли способ получить именно то что вижу на экране (текст и переносы) в виде текста в js переменную? (перенос в виде \n)
Добавлено: Просто я думал что есть уже готовые решения или простые способы брать то что видишь из html и это по идее должно работать не только с contenteditable но и с любым html. Вообще полная задача у меня такая: есть div contenteditable, в нём текст. У меня есть 2 поля textarea 'что заманить' и 'чем заменить' аналог ctrl+H с поддержкой текста с переносами. Я хочу чтобы этот самописный аналог ctrl+H заменял содержимое div contenteditable (сначала получал текст, потом делал замену, потом вставлял текст обратно [css стили можно терять, они не важны])
Проблема решена! Я хз почему сам сразу не додумался, но ещё больше удивлён что никто здесь тоже не додумался
- нужно выделить текст в div#q1 contenteditable (с помощью createRange...)
- получить выделенный на странице текст в переменную. Готово.