Получить текстовое содержимое из div с атрибутом contenteditable с помощью JavaScript

Использование textContent для получения текста из элемента с атрибутом contenteditable может быть не самым лучшим решением. Причина этого заключается в том, что textContent возвращает только текст без учета форматирования, интерактивности или других возможных элементов внутри элемента contenteditable.

Когда вы используете textContent, вы теряете все HTML-теги и атрибуты, которые могут быть важны для вашего контента. Например, если у вас есть текст с примененными стилями (например, жирный шрифт или курсив) или встроенные элементы, такие как ссылки, textContent просто вернет текст без форматирования, что может сделать ваш результат неполным.

Вместо этого, если вам нужно получить HTML-содержимое вместе с текстом и форматированием, вы можете использовать свойство innerHTML:

var contenteditable = document.querySelector('[contenteditable]'),
    htmlContent = contenteditable.innerHTML;

Таким образом, вы получите все содержимое с учетом HTML-разметки, что может быть полезно, особенно если вы собираетесь сохранять или отображать это содержимое в другом месте.

Если же вам нужно только текст, и вы уверены, что форматирование не имеет значения, тогда использование textContent может быть приемлемым вариантом. Все зависит от ваших конкретных требований к контенту.

К сожалению, я обнаружил, что innerText — это единственный способ сохранить переносы строк в редактируемых DOM-узлах. То, что я делаю (пока что тестировалось только в Chrome), выглядит следующим образом:

var innerText = editableDiv.innerText;  // используем innerText, так как он сохраняет переносы строк
if(innerText[innerText.length - 1] === '\n') 
    innerText = innerText.slice(0, -1);  // убираем лишний перенос в конце
return innerText;

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

Вы можете использовать следующий код для получения содержимого редактируемого поля с ID lblMailContent. Вам необходимо поместить этот код в обработчик события clientClick. Вот пример:

var details = document.getElementById("lblMailContent").innerHTML;

Этот код корректно извлекает HTML-содержимое элемента с указанным ID. Убедитесь, что ваш элемент действительно существует на странице, и обработчик clientClick сработает без ошибок. Если у вас возникают какие-либо проблемы, убедитесь, что элемент загружен до выполнения этого кода.

Я решил это следующим образом, так как мне нужен HTML-ввод. Вот код:

message = $('<div>').html(
   $('#area').html()
   .replace(/<(div|p|br)[^<]*?>/g, '&lt;br /&gt;')
   .replace(/<([(i|a|b|u)^>]+)>(.*?)<\/\1>/gim, 
      function(v) { return '' + escape(v) + ''; })
).text();

Этот код позволяет использовать теги <a>, <b>, <i> и <u>, при этом заменяя <div> и <p> на <br />.

Похоже, ваш код написан с намерением извлечь текст из элемента DOM, используя селектор. Однако, у вас есть несколько ошибок в реализации. Вот отредактированная версия, которая исправляет эти моменты:

function textFromDiv(selector) {
  const element = document.querySelector(selector);
  if (element) {
    // Получаем HTML-содержимое элемента
    const html = element.innerHTML;
    // Заменяем <div> на новую строку, удаляем закрывающие теги <div>, заменяем <br> на новую строку
    const text = html.replace(/<div>/g, "\n").replace(/<\/div>/g, "").replace(/<br\s*\/?>/g, "\n");
    return text.trim(); // Возвращаем текст без лишних пробелов в начале и в конце
  }
  return null; // Если элемент не найден, можно вернуть null
}

Объяснение изменений:

1. element.innerHTML: Вместо обращения к element.html(), что является ошибкой, используется element.innerHTML, чтобы получить HTML-содержимое элемента.

2. Проверка на существование элемента: Добавлена проверка if (element), чтобы избежать ошибок в случае, если селектор не находит соответствующий элемент.

3. Обработка <br> тегов: Используется регулярное выражение /<br\s*\/?>/g, чтобы корректно обрабатывать как <br>, так и <br/>.

4. Обрезка текста: Применен метод trim(), чтобы удалить лишние пробелы в начале и в конце строки.

5. Возврат null для несуществующего элемента: Если элемент не найден, функция возвращает null, что может помочь в отладке.

Теперь функция будет работать корректно и возвращать текст без HTML-тегов.