У меня есть div установлен вcontentEditable и в стиле "white-space:pre"поэтому он сохраняет такие вещи, как разрывы строк. В Safari, FF и IE, div в значительной степени выглядит и работает одинаково. Все хорошо. Что я хочу сделать, это извлечь текст из этого div, но таким образом, что не будет потерять форматирование - в частности, разрывы строк.

Мы используем JQuery, чьиtext() Функция в основном выполняет предварительный заказ DFS и склеивает все содержимое в этой ветви DOM в один кусок. Это теряет форматирование.

Я посмотрел наhtml() функции, но кажется, что все три браузера делают разные вещи с реальным HTML, который генерируется за кулисами в моемcontentEditable дела. Предполагая, что я ввожу это в свой 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 может разбить пробел. Это правда или я что-то не так делаю?