La chiamata jQuery text () conserva le newline in Firefox ma non in IE

Sto facendo:

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

su qualcosa del genere:

 
<div> Some text <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 consigli un editor di testo avanzato, questo codice non è in realtà HTML. È un dialetto personalizzato.

    Quindi, come posso mantenere le newline in IE?

    Sembra che questo sia il mio problema: 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 le quantità di spazi vuoti adiacenti sono collassati in un unico spazio. Questa è una buona cosa – proprio come un esempio, mi permette di aggiungere molte interruzioni di riga in questo file sorgente senza dovermi preoccupare di interruzioni di riga strane nel testo visualizzato.

    Internet Explorer applica queste trasformazioni all’assegnazione alla proprietà innerHTML. Sembra una buona idea: risparmia un po ‘di tempo durante la visualizzazione, perché se la rappresentazione in memoria è già normalizzata, il browser non deve normalizzarsi ogni volta che è necessario visualizzare il testo.

    Ci sono tuttavia delle eccezioni alla regola di normalizzazione. In particolare, questi sono l’elemento

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

    Questo testo riempie la textarea al caricamento della pagina. Anche questo contiene interruzioni di riga e spazi multipli. Anche qui è conservata la formattazione, tranne che l'UA potrebbe spezzare le linee.

    (enfasi aggiunta)

    E infatti se lo cambio a:

     
     ... 

    e

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

    o semplicemente:

      

    tutto funziona magicamente.

    Non sono sicuro se questo sarebbe d’aiuto, ma forse potresti provare questo:

     #div { white-space: pre; } 

    Vedi qui per una soluzione:

    L’hack è prima di clonare l’elemento di cui vuoi il contenuto, usando cloneNode ().

    Quindi si crea un elemento

    
    

    con createElement (), quindi si aggiunge il nodo clonato ad esso.

    Ora puoi ottenere il testo interiore di quell'elemento

    
    

    creazione e solo eliminare gli oggetti temporanei. Ora hai testo con testo bianco 🙂

     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é appendChild () lo estrarrà dal DOM e sarà difficile reinserirlo nella posizione corretta nel DOM.

    Spero che questo aiuti alcune persone là fuori 🙂