Проблема с обнаружением новых строк в JavaScript Range Object - PullRequest
Новая
       20

Проблема с обнаружением новых строк в JavaScript Range Object

14 голосов
/ 18 июля 2009

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

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

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

Выбранный текст:

а

1010 * Защита *

ГХИ

range.toString () имеет значение "abcdefghi".

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

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

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

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

Ответы [ 3 ]

12 голосов
/ 18 июля 2009

Редактирование моего поста:

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

Не удалось найти объяснение этому поведению.

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

2 голосов
/ 14 августа 2014

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

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

var documentFragment = rangeObj.cloneContents ();

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


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

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


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

0 голосов
/ 22 июля 2018

Благодаря 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;

}

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

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

...