jQuery testo) chiamata (conserva a capo in Firefox, ma non in IE

Question

sto facendo:

alert($("#div").text()); 

su qualcosa di simile:

<div id="div"> 
&lt;div&gt; 
Some text 
&lt;div&gt; 
</div> 

Perché il contenuto sfuggito? Perché a volte è malformato e non voglio interferire con o rompere il resto del documento.

In FF mostra preservare i newline. In IE7 non è così. Ho bisogno di preservare lo spazio bianco. Questo contenuto sta effettivamente andando in una textarea per la modifica.

E prima che qualcuno raccomandi un editor di testo avanzato, questo codice non è in realtà HTML. È un dialetto personalizzato.

Quindi, come mantenere le newline in IE?

Answer 1

Sembra che questo è il mio problema: The Internet Explorer innerHTML Quirk:

Tuttavia, innerHTML ha un problema in Internet Explorer.

Lo standard HTML richiede una trasformazione sulla visualizzazione del contenuto. Tutti i tipi e gli importi di spazi vuoti adiacenti vengono compressi in un unico spazio . Questa è una buona cosa - proprio come un esempio, mi permette di aggiungere un sacco di interruzioni di riga in questo file sorgente senza doversi preoccupare delle interruzioni di riga strane nel testo visualizzato.

Internet Explorer applica queste trasformazioni all'assegnazione alla proprietà innerHTML . Questa sembra una buona idea : fa risparmiare un po 'di tempo durante la visualizzazione, perché se la rappresentazione in memoria è già normalizzato, allora il browser non ce l'ha a normalizzare ogni volta che deve visualizzazione del testo.

Esistono tuttavia delle eccezioni alla regola di normalizzazione . In particolare, si tratta dell'elemento < textarea, l'elemento < e, nei browser CSS-aware, elementi con qualsiasi valore ma normale per la proprietà white-space.

Internet Explorer non rispetta questi casi speciali. Il terzo rende l'ottimizzazione di una cattiva idea, perché lo spazio bianco potrebbe cambiare in fase di esecuzione, ad esempio attraverso il DOM. In qualsiasi caso , Internet Explorer normalizzerà tutte le assegnazioni alla proprietà innerHTML , causando in tal modo l'effetto illustrato di seguito.

Questo testo riempie il campo di testo a pagina carico. Anche questo contiene interruzioni di linea e più spazi. La formattazione è anche qui conservata, ad eccezione di UA potrebbe interrompere le linee.

(enfasi aggiunta)

E in effetti se cambio a:

<div id="div"> 
<pre> 
... 
</pre> 
</div> 

e

$("#div pre").text() 

o semplicemente:

<style type="text/css"> 
#div { white-space: pre } 
</style> 

tutto funziona magicamente.

Answer 2

Non sono sicuro se questo aiuterebbe, ma forse si potrebbe provare questo:

#div { 
    white-space: pre; 
} 

Answer 3

Vedi here per una soluzione alternativa:

L'hack è quello di clonare prima l'elemento si desidera il contenuto di, utilizzando cloneNode().

Quindi si crea un elemento <pre> con createElement(), quindi si aggiunge il nodo clonato ad esso.

Ora è possibile ottenere il testo interiore di quello creare l'elemento <pre> e solo eliminare gli oggetti temporanei. Si dispone ora di spazi testo conservato :)

var cloned = targetElement.cloneNode(true); 
var pre = document.createElement("pre"); 
pre.appendChild(cloned); 
var textContent = pre.textContent ? 
    pre.textContent : pre.innerText; 
delete pre; 
delete cloned; 

Il motivo per cui clonare l'elemento è perché l'appendChild() tirerebbe fuori del DOM ed è il dolore il reinserire di nuovo nella posizione corretta nel DOM.

Speriamo che questo aiuta alcune persone fuori lì :)