0

В 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 стили можно терять, они не важны])


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

  1. нужно выделить текст в div#q1 contenteditable (с помощью createRange...)
  2. получить выделенный на странице текст в переменную. Готово.
2
  • Почему contenteditable, а не textarea? 29 авг 2022 в 7:12
  • Потому что в итоге я раскрашиваю текст и меняю размер шрифта с помощью span в некоторых местах у финального текста и навешиваю там некоторые события onckick.
    – mark2712
    29 авг 2022 в 7:24

2 ответа 2

0

В теории

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

  2. Заменяем все связки </div><div> на \n

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

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

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

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

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

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

9
  • Спасибо, css paddings и margins и не нужны, интересует только текст
    – mark2712
    29 авг 2022 в 6:03
  • А есть готовый код который сможет заменить все связки </div><div>? Или вы имеете ввиду просто заменить '</div><div>'? Просто вроде могут быть и вложенные ('<div>текст<div>текст<div>текст</div></div></div>'), что будет с ними?
    – mark2712
    29 авг 2022 в 6:04
  • Так мы же с html работаем как со строкой, через обычный метод replace (с учетом что мы от лишних переносов и пробелов уже избавились text = text.replace("</div><div>", ""); 29 авг 2022 в 6:10
  • Можно попробовать такой вариант, заменяем сначала все связки </div><div>, у нас остается кейс с вложенными дивами, каждый такой блок создает как бы новую строку, соответственно все оставшиеся <div> и </div> заменяем (по отдельности) на <br /> 29 авг 2022 в 6:16
  • Скорректировал ответ. Есть еще какие-то кейсы ? 29 авг 2022 в 6:19
0

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

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

И не нужно никаких замен 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;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.