2009-07-18 12 views
11

Mam trochę javascript, który manipuluje html na podstawie tego, co wybrał użytkownik. Dla prawdziwych przeglądarek metody Używam dźwigni „zasięgu” obiekt, otrzymany jako takie:Wykrywanie problemu Newlines w zakresie JavaScript Object Object

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

zmienna Zawartość zawiera wszystkie zaznaczonego tekstu, który działa dobrze. Jednak stwierdzam, że nie mogę wykryć nowych linii w wynikowym ciągu. Na przykład:

Wybrany tekst jest:

abc

def

ghi

range.toString() ma wartość "abcdefghi".

Wyszukiwanie na znakach specjalnych nie zwraca żadnej instancji \ n \ f \ r ani nawet \ s. Jeśli jednak wypiszę zmienną do edytowalnego elementu sterującego, kanały liniowe są ponownie obecne.

Czy ktoś wie, czego mi brakuje?

Może być istotne, że te wybory i manipulacje są na edytowalnych elementach div. Takie samo zachowanie jest widoczne w Chrome, FireFox i Operze. Zaskakująco IE potrzebuje zupełnie innego kodu, ale nie ma tam żadnych problemów, poza tym, że to po prostu IE.

Wielkie dzięki.

+0

Co rozumiesz przez "range.toString() oznacza" abcdefghi "? Czego używasz do badania tej wartości? Debugger? alarm()? –

+0

Czy piszesz wartość 'range' do edytowalnego sterowania lub' range.toString() '? – RaYell

+0

@Ben Dunlap wszystkie powyższe, przy użyciu zewnętrznych debugerów, alertów lub przeglądarek opartych na debuggerach. Na przykład trafienie w punkt przerwania za pomocą Visual Studio. @RaYell - Próbowałem napisać zawartość wynikającą z mojego wywołania range.toString() do edytowalnego div, aby udowodnić, że zachował on informacje o nowej linii. Pierwsza odpowiedź przybita to jednak, sel.toString() ma nowe linie, range.toString() nie. Dzięki wszystkim. – Timbo

Odpowiedz

11

Edycja mój post:

eksperymentowanie trochę uważam, że sel.toString() zwraca nowe linie w contenteditable div, natomiast range.toString() powraca nowe linie poprawnie w normalnych nieedytowalnych div, ale nie w tych, które można edytować, jak podano.

Nie można znaleźć żadnego wyjaśnienia dla zachowania.

Jest to użyteczne Link http://www.quirksmode.org/dom/range_intro.html

+0

Doskonały, tak, sel.toString() ma nowe linie. Dziękuję bardzo! – Timbo

+1

Wyjaśnienie jest proste i jest określone w specyfikacji zakresu DOM: 'Range.toString()' zawiera tylko treść z węzłów tekstowych. '
' Elementy i podziały linii sugerowane przez elementy blokowe nie są więc uwzględniane. –

+1

'document.getSelection(). ToString()' nie działa w IE 11. łączy w sobie cały nowy tekst linii w jeden. – agpt

1

znalazłem co najmniej dwa inne sposoby, dlatego nadal mogą korzystać z ofertą, aby znaleźć pozycję karetki w Mozilli.

Jednym sposobem jest wywołanie

var documentFragment = rangeObj.cloneContents(); 

który posiada tablicę childNodes, a wszelkie podziały wiersza pokaże jako węzeł klasy „HTMLBRElement”.


Innym sposobem jest upewnienie się, że po każdym tagu "br" występuje znak nowego wiersza (0x0a)!

To nie zaszkodzi treści HTML w jakikolwiek widoczny sposób, ale teraz wszystkie przerwy w HTML są tłumaczone na liniowe podziały wiersza, gdy tylko wywoływana jest funkcja range.toString()!


Mam nadzieję, że to pomoże - nawet jeśli ten temat jest bardzo stary. (I tak już jestem nekromantą, hehe) :)

Powiązane problemy