Фон
В большинстве вопросов об извлечении текста из HTML (т.е. удаление тегов) используйте:
jQuery( htmlString ).text();
Хотя это абстрагирует несоответствия браузера (например, innerText
vs. textContent
), вызов функции также игнорирует семантическое значение элементов уровня блока (например, li
).
Проблема
Сохранение новых строк элементов уровня блока (т.е. семантического намерения) в разных браузерах влечет за собой небольшие усилия, поскольку описывает Майк Уилкокс.
По-видимому, более простым решением было бы эмулировать вставку HTML-содержимого в <textarea>
, который удаляет HTML, сохраняя при этом элементы новой строки уровня блока. Однако вставки на основе JavaScript не запускают те же подпрограммы HTML-to-text, которые используются браузерами, когда пользователи вставляют контент в <textarea>
.
Я также попытался интегрировать Mike Wilcox код JavaScript. Код работает в Chromium, но не в Firefox.
Вопрос
Каков самый простой кросс-браузерный способ извлечения текста из HTML, сохраняя при этом семантические символы новой строки для элементы уровня блока, используя jQuery (или ванильный JavaScript)?
Пример
Рассмотрим:
- Выберите и скопируйте весь этот вопрос.
- Откройте страницу примера textarea.
- Вставьте содержимое в текстовое поле.
Текстовая область сохраняет новые строки для упорядоченных списков, заголовков, предварительно отформатированного текста и т.д. Это результат, которого я хотел бы достичь.
Для дальнейшего уточнения, учитывая любой HTML-контент, например:
<h1>Header</h1>
<p>Paragraph</p>
<ul>
<li>First</li>
<li>Second</li>
</ul>
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
<div>Div with <span>span</span>.<br />After the <a href="...">break</a>.</div>
Как бы вы производили:
Header Paragraph First Second Term Definition Div with span. After the break.
Примечание. Не имеет значения ни отступы, ни ненормированные пробелы.