2009-07-18 4 views
11

Ho qualche javascript che manipola il codice HTML in base a ciò che l'utente ha selezionato. Per i browser reali i metodi che sto usando leverage l'oggetto "Range", ottenuti come tale:Problema durante il rilevamento di righe nuove nell'oggetto intervallo JavaScript

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

variabili Il contenuto contiene tutto il testo selezionato, che funziona bene. Tuttavia sto scoprendo che non riesco a rilevare le nuove righe nella stringa risultante. Per esempio:

testo selezionato è:

abc

def

ghi

range.toString() valuta a "abcdefghi".

Qualsiasi ricerca su caratteri speciali non restituisce istanze di \ n \ f \ r o anche \ s. Se, tuttavia, scrivo la variabile su un controllo modificabile, i feed di riga sono nuovamente presenti.

Qualcuno sa cosa mi manca?

Potrebbe essere importante che queste selezioni e manipolazioni siano su div modificabili. Lo stesso comportamento è evidente in Chrome, FireFox e Opera. Sorprendentemente, IE richiede comunque un codice completamente diverso, ma non ci sono problemi, a parte il semplice fatto di essere IE.

Molte grazie.

+0

Cosa intendi con 'range.toString() restituisce "abcdefghi"'? Che cosa stai usando per esaminare questo valore? Un debugger? mettere in guardia()? –

+0

Stai scrivendo il valore di 'range' sul controllo modificabile o' range.toString() '? – RaYell

+0

@Ben Dunlap tutto quanto sopra, utilizzando debugger esterni, avvisi o debugger basati su browser. Ad esempio, colpire in un punto di interruzione con Visual Studio. @RaYell - Ho provato a scrivere il contenuto risultante dalla mia chiamata range.toString() in un div editabile, per dimostrare di aver mantenuto le informazioni sulla nuova riga. Prima risposta inchiodata a questo, il sel.toString() ha le nuove righe, range.toString() no. Grazie a tutti. – Timbo

risposta

11

Modifica il mio post:

Sperimentare un po ', trovo che sel.toString() restituisce nuove linee in div contentEditable, mentre range.toString() ritorna a capo correttamente in normali div non modificabili, ma non in quelli modificabili, come da te segnalato.

Non ho trovato alcuna spiegazione per il comportamento però.

Questo è un link utile http://www.quirksmode.org/dom/range_intro.html

+0

Eccellente, sì, sel.toString() ha le nuove righe. Grazie mille! – Timbo

+1

La spiegazione è semplice ed è esposta nelle specifiche dell'intervallo DOM: 'Range.toString()' include solo il contenuto dei nodi di testo. '
' Gli elementi e le interruzioni di riga implicite dagli elementi di blocco non sono quindi inclusi. –

+1

'document.getSelection(). ToString()' non funziona in IE 11. fonde tutto il testo di una nuova riga in uno. – agpt

1

ho trovato almeno altri due modi, quindi si può ancora utilizzare il campo per trovare la posizione del cursore in Mozilla.

Un modo è quello di chiamare

var documentFragment = rangeObj.cloneContents(); 

che contiene una matrice di childNodes, ed eventuali interruzioni di riga mostrerà come nodo di classe "HTMLBRElement".


L'altro modo è assicurarsi che ogni tag "br" sia seguito da un carattere di nuova riga (0x0a)!

Ciò non danneggerà il contenuto HTML in alcun modo visibile, ma ora tutte le interruzioni HTML vengono convertite in interruzioni di riga di testo normale non appena viene chiamato range.toString()!


Spero che questo aiuti, anche se questo argomento è molto vecchio. (Sono già un negromante, hehe) :)