2009-07-18 7 views
11

Ich habe Javascript, das HTML manipuliert, basierend auf dem, was der Benutzer ausgewählt hat. Für echte Browsern die Methoden, die ich bin mit Hebelwirkung der „Range“ Objekt als solches erhalten:Problem beim Erkennen von Zeilenumbrüchen im JavaScript-Bereich Objekt

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

Der Inhalt Variable enthält alle ausgewählten Text, der gut arbeitet. Ich finde jedoch, dass ich die Zeilenumbrüche in der resultierenden Zeichenfolge nicht erkennen kann. Zum Beispiel:

Ausgewählter Text ist:

abc

def

ghi

range.toString() den Wert "abcdefghi".

Jede Suche nach Sonderzeichen gibt keine Instanz von \ n \ f \ r oder even \ s zurück. Wenn ich jedoch die Variable in ein editierbares Steuerelement schreibe, sind die Zeilenvorschübe wieder vorhanden.

Weiß jemand, was ich vermisse?

Es kann wichtig sein, dass diese Auswahlen und Manipulationen in bearbeitbaren divs sind. Das gleiche Verhalten zeigt sich in Chrome, FireFox und Opera. Überraschenderweise benötigt IE sowieso einen völlig anderen Code, aber da gibt es keine Probleme, außer dass es nur IE ist.

Vielen Dank.

+0

Was meinst du mit 'range.toString() ergibt "abcdefghi"'? Was verwenden Sie, um diesen Wert zu untersuchen? Ein Debugger? aufmerksam()? –

+0

Schreiben Sie 'range' Wert in editierbares Steuerelement oder' range.toString() '? – RaYell

+0

@Ben Dunlap alle der oben genannten, mit externen Debuggern, Warnungen oder browserbasierte Debugger. Zum Beispiel, einen Haltepunkt mit Visual Studio zu treffen. @RaYell - Ich habe versucht, den Inhalt, der sich aus meinem Aufruf von range.toString() ergibt, in ein editierbares div zu schreiben, um zu beweisen, dass es die Newline-Informationen beibehielt. erste Antwort genagelt, obwohl die sel.toString() hat die Zeilenumbrüche, range.toString() nicht. Danke allen. – Timbo

Antwort

11

meinen Beitrag bearbeiten:

ein wenig Experimentieren, finde ich, dass sel.toString() kehrt neue Linien in contenteditable divs, während range.toString() kehrt richtig in normalen, nicht editierbar divs Zeilenumbrüche, aber nicht in editierbare diejenigen, wie Sie berichtet.

Konnte für das Verhalten keine Erklärung jedoch finden.

Dies ist eine nützliche Verbindung http://www.quirksmode.org/dom/range_intro.html

+0

Ausgezeichnet, ja, sel.toString() hat die Zeilenumbrüche. Vielen Dank! – Timbo

+1

Die Erklärung ist einfach und ist in der DOM Range-Spezifikation ausgelegt: 'Range.toString()' beinhaltet nur Inhalt von Textknoten. '
' Elemente und Zeilenumbrüche impliziert durch Blockelemente sind daher nicht enthalten. –

+1

'document.getSelection(). ToString()' funktioniert nicht in IE 11. das Zusammenführen aller neuen Linientexte in einen. – agpt

1

ich mindestens zwei weitere Möglichkeiten gefunden, so können Sie immer noch den Bereich verwenden, um die Position des Cursors in Mozilla zu finden.

Ein Weg ist

var documentFragment = rangeObj.cloneContents(); 

zu nennen, die eine Anordnung von childnodes hält und alle Zeilenumbrüche als ein Knoten der Klasse zeigt „HTMLBRElement“.


Der andere Weg besteht darin, sicherzustellen, dass jedem "br" -Tag ein Zeilenumbruchzeichen (0x0a) folgt!

Dies wird den HTML-Inhalt nicht in irgendeiner sichtbaren Weise verletzen, aber jetzt werden alle HTML-Unterbrechungen in Klartext-Zeilenumbrüche umgewandelt, sobald range.toString() aufgerufen wird!


Ich hoffe das hilft - auch wenn dieses Thema sehr alt ist. (Ich bin sowieso schon ein Nekromant, hehe) :)

Verwandte Themen