texte jQuery() d'appel conserve dans Firefox, mais les nouvelles lignes pas dans IE

Question

je fais:

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

sur quelque chose comme ceci:

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

Pourquoi le contenu échappé? Parce qu'il est parfois malformé et je ne veux pas qu'il interfère avec le document ou le casse.

Dans FF, il apparaît en préservant les retours à la ligne. Dans IE7, ce n'est pas le cas. J'ai besoin de préserver l'espace blanc. Ce contenu va en fait dans une zone de texte pour l'édition.

Et avant que quiconque ne recommande un éditeur de texte riche, ce code n'est pas vraiment HTML. C'est un dialecte personnalisé.

Alors, comment puis-je garder les nouvelles lignes dans IE?

Answer 1

Il ressemble à ceci est mon problème: The Internet Explorer innerHTML Quirk:

Cependant, innerHTML a un problème dans Internet Explorer.

La norme HTML nécessite une transformation lors de l'affichage du contenu. Tous les espaces blancs et tous les espaces adjacents sont regroupés dans un seul espace . Ceci est une bonne chose - tout comme un exemple, il me permet d'ajouter beaucoup de sauts de ligne dans ce fichier source sans avoir à s'inquiéter de sauts de ligne étranges dans le texte affiché. Internet Explorer applique ces transformations en affectation à la propriété innerHTML . Cela semble être une bonne idée : il permet d'économiser un peu de temps pendant l'affichage, parce que si la représentation en mémoire est déjà normalisée, le navigateur ne doivent normaliser chaque fois qu'il doit afficher le texte. Toutefois, il existe des exceptions à la règle de normalisation . Notamment, ce sont l'élément text12> <, l'élément < pre> et, dans les navigateurs CSS , les éléments avec n'importe quelle valeur mais normal pour la propriété d'espace blanc. Internet Explorer ne respecte pas les ces cas spéciaux. Le troisième fait leur optimisation une mauvaise idée, parce que white-space pourrait changer à l'exécution, par exemple à travers le DOM. Dans tout cas , Internet Explorer normalise toutes les affectations à la propriété innerHTML , provoquant ainsi l'effet illustré ci-dessous.

Ce texte remplit la zone de texte à la page . Cela contient également des sauts de ligne et plusieurs espaces. Le formatage est conservé ici aussi, sauf que l'UA peut casser des lignes.

(italique ajouté)

Et en effet, si je change à:

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

et

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

ou simplement:

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

tout fonctionne comme par magie.

Answer 2

Je ne sais pas si cela serait utile, mais vous pourriez peut-être essayer ceci:

#div { 
    white-space: pre; 
} 

Answer 3

Voir here pour une solution de contournement:

Le hack est d'abord cloner l'élément vous voulez le contenu de, en utilisant cloneNode().

Ensuite, vous créez un élément <pre> avec createElement(), puis votre append noeud cloné à lui.

Maintenant vous pouvez obtenir le innerText de cet élément créer <pre> et simplement supprimer les objets temporaires. Vous avez maintenant espaces texte préservé :)

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; 

La raison pour laquelle je clone l'élément est parce que le appendChild() retirerait hors du DOM et sa douleur la réinsérez retour à la position correcte dans le DOM.

Espérons que cela aide quelques gens là :)