Проблема с обнаружением новых строк в объекте диапазона JavaScript

Question

У меня есть некоторый javascript, который манипулирует html на основе того, что выбрал пользователь.Для реальных браузеров методы, которые я использую, используют объект "Range", полученный как таковой:

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var content = range.toString();

Переменная content содержит весь выделенный текст, который работает нормально.Однако я обнаружил, что не могу определить новые строки в результирующей строке.Например:

Выделенный текст является:

азбука

деф

ghi

диапазон.Функция toString() вычисляет значение "abcdefghi".

Любой поиск по специальным символам не возвращает экземпляра \f или даже \s.Однако, если я запишу переменную в редактируемый элемент управления, переводы строк снова появятся.

Кто-нибудь знает, чего мне не хватает?

Может иметь значение, что эти выделения и манипуляции выполняются в редактируемых файлах divs.Такое же поведение наблюдается в Chrome, FireFox и Opera.Удивительно, но IE в любом случае нуждается в совершенно другом коде, но там нет никаких проблем, кроме того, что это просто IE.

Большое спасибо.

Answer 1

Редактирую свой пост:

Немного поэкспериментировав, я обнаружил, что sel.toString() возвращает новые строки в contenteditable divs, в то время как range.toString() корректно возвращает новые строки в обычных не редактируемых файлах divs, но не в редактируемых, как вы сообщали.

Однако не смог найти никакого объяснения такому поведению.

Это полезная ссылка http://www.quirksmode.org/dom/range_intro.html

Answer 2

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

Один из способов - позвонить

var documentFragment = rangeObj.cloneContents ();

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

Другой способ - убедиться, что за каждым тегом "br" следует символ новой строки (0x0a)!

Это не повредит содержимому HTML каким-либо видимым образом, но теперь все разрывы HTML преобразуются в обычные текстовые разрывы строк, как только появляется range.Вызывается toString()!

Я надеюсь, что это поможет - даже если эта тема очень старая.(Я все равно уже некромант, хе-хе) :)

Answer 3

Благодаря OP я смог сделать это с помощью window.getSelection(), как он предложил.Мне нужно было получить текст до позиции курсора в InputEvent , что дает мне статический диапазон со вставленным текстом.Итак, у меня есть диапазон, но не обязательно диапазон текущего выбора.

function richToPoorText(range){
    //Caso base, está colapsado.
        console.log(range);
        var restoreRange=document.createRange(); //needed for restoring the caret pos.
        restoreRange.setStart(range[0].endContainer, range[0].endOffset);
        restoreRange.setEnd(range[0].endContainer, range[0].endOffset);
        rangeClone=document.createRange();
        rangeClone.setStart(__baseEditor,0);
        rangeClone.setEnd(range[0].endContainer, range[0].endOffset);
        var str;
        var sel=window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rangeClone);   //sel does converts the br to newlines
        str=sel.toString();
        sel.removeAllRanges();
        sel.addRange(restoreRange);
        return str;

}

Большое Вам спасибо, ОП.И если у кого-то есть такой же вариант использования, вы можете использовать этот snipset

Редактировать:__baseEditor - это глобальная переменная, указывающая на основной раздел редактора contenteditable div