У меня есть div, установленный на contentEditable и стилизованный под "white-space:pre", так что он сохраняет такие вещи, как переносы строк.В Safari, FF и IE div выглядит и работает одинаково.Все хорошо.Что я хочу сделать, это извлечь текст из этого div, но таким образом, чтобы не потерять форматирование - в частности, разрывы строк.
Мы используем jQuery, чья функция text() в основном делаетпредварительный заказ DFS и склеивает все содержимое в этой ветви DOM в один кусок.Это теряет форматирование.
Я посмотрел на функцию html(), но кажется, что все три браузера делают разные вещи с реальным HTML, который генерируется за кулисами в моем contentEditable div.Предполагая, что я наберу это в свой div:
1
2
3
Вот результаты:
Safari 4:
1
<div>2</div>
<div>3</div>
Firefox 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
Тьфу.Ничего особенного здесь нет.Удивительно то, что MSIE выглядит самым вменяемым!(Прописная метка P и все)
У div будет динамически установленный стиль (шрифт, цвет, размер и выравнивание), который выполняется с помощью CSS, поэтому я не уверен, что смогу использовать preтег (который упоминался на некоторых страницах, которые я нашел с помощью Google).
Кто-нибудь знает какой-либо код JavaScript и / или плагин jQuery или что-то, что будет извлекать текст из div contentEditable таким образомкак сохранить разрывы строк? Я бы предпочел не изобретать колесо синтаксического анализа, если в этом нет необходимости.
Обновление: я извлек функцию getText из jQuery 1.4.2 и изменил ее наизвлекать его с пробелами в основном нетронутыми (я изменил только одну строку, где я добавляю новую строку);
function extractTextWithWhitespace( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue + "\n";
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += extractTextWithWhitespace2( elem.childNodes );
}
}
return ret;
}
Я вызываю эту функцию и использую ее вывод для присвоения ее узлу XML с помощью jQuery, что-то вроде:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
Полученный XML в конечном итоге отправляется на сервер с помощью вызова AJAX.
Это хорошо работает в Safari и Firefox.
В IE только первый '\N 'кажется, как-то удерживается.Если взглянуть на это подробнее, похоже, что jQuery устанавливает текст следующим образом (строка 4004 из jQuery-1.4.2.js):
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
Читая createTextNode, кажется, что реализация IE можетрастолочь пробел.Это правда или я что-то не так делаю?