contenteditable получить то что вижу

Question

В 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...)
получить выделенный на странице текст в переменную. Готово.

Answer 1

В теории

Берем innerHtml и удаляем все переносы строк, которые есть сейчас через \n. Т.е. по сути инлайним весь хтмл в одну строку.
Заменяем все связки </div><div> на \n

2а) Тут еще нужно проверить наличие лишних пробелов между тегами div и предварительно избавится от них, можно это через регулярки провернуть.

2б) Остается кейс с вложенностью, <div> и </div> по отдельности заменяем на <br/>

2в) Возможно получатся лишние <br/> в начале и в конце нашей конечной строки, избавляемся от них (можно через регулярки, можно через split)

Заменяем все <br>, <br/>, <br /> и тоже самое в верхнем регистре (следует учитывать разную кривую верстку) на \n

Так же следует учитывать, что на самих div могут быть навешены paddings и margins, соответственно в конечном варианте отступы уже не будут выглядеть также, как в исходном.

Возможно еще какие-то пограничные кейсы забыл, но тут уже действуйте по обстоятельствам

Answer 2

Проблема решена! Я хз почему сам сразу не додумался (какой же я тупой), но ещё больше удивлён что никто здесь тоже не додумался

нужно выделить текст в div#q1 contenteditable (с помощью createRange...)
получить выделенный на странице текст в переменную. Готово.

И не нужно никаких замен br, div и прочего парсинга

//selector1 - наш элемент с contenteditable
function get_text(selector1){
    let text_temp = document.querySelector(selector1);
    var el = text_temp;
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    if (window.getSelection()) {
        var select = window.getSelection();
        text_temp = select.toString();
    }
    
    console.log(text_temp);
    return text_temp;
}

БЛОГ НА HUSL

contenteditable получить то что вижу

Ответы (2 шт):