jQuery text() Aufruf bewahrt Zeilenumbrüche in Firefox, aber nicht in IE

Question

ich tue:

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

auf so etwas wie folgt aus:

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

Warum der entkam Inhalt? Weil es manchmal missgebildet ist und ich nicht möchte, dass es den Rest des Dokuments stört oder unterbricht.

In FF werden Zeilenumbrüche beibehalten. In IE7 tut es nicht. Ich muss den weißen Raum bewahren. Dieser Inhalt wird zur Bearbeitung in ein Textfeld geschrieben.

Und bevor jemand einen Rich-Text-Editor empfiehlt, ist dieser Code nicht wirklich HTML. Es ist ein benutzerdefinierter Dialekt.

Also, wie behalte ich die Zeilenumbrüche in IE?

Answer 1

es so aussieht, ist mein Problem: The Internet Explorer innerHTML Quirk:

hat jedoch innerHTML- ein Problem in Internet Explorer.

Der HTML-Standard erfordert eine Transformation bei der Anzeige des Inhalts. Alle Arten und Mengen benachbarter Leerzeichen sind in einen einzigen Space zusammengelegt. Das ist eine gute Sache - genau wie ein Beispiel, erlaubt es mir, eine Menge von Zeilenumbrüchen in diese Quelldatei ohne sich über seltsame Zeilenumbrüche im angezeigten Text sorgen hinzufügen.

Der Internet Explorer wendet diese Transformationen bei Zuweisung auf die innerHTML-Eigenschaft an. Dies scheint eine gute Idee: es eine wenig Zeit während der Anzeige spart, denn wenn die in Speicherrepräsentation bereits normalisiert, dann wird der Browser nicht hat zu normalisieren, wenn sie in Anzeige muss der Text.

Es gibt jedoch Ausnahmen von der Normalisierungsregel . Insbesondere sind dies Dies sind die < textarea> -Elemente, das < pre> -Element und, in CSS-fähigen Browsern, Elemente mit einem beliebigen Wert außer normal für die White-Space-Eigenschaft.

Der Internet Explorer respektiert diese Sonderfälle nicht . Die dritte macht ihre Optimierung eine schlechte Idee, weil Leerzeichen zur Laufzeit, zum Beispiel durch das DOM ändern kann. In jedem Fall normalisiert Internet Explorer alle Zuordnungen zur Eigenschaft innerHTML , wodurch der unten gezeigte Effekt verursacht wird.

Dieser Text füllt den Textbereich auf Seite laden. Auch dies enthält Zeilenumbrüche und mehrere Leerzeichen. Formatierung ist auch hier erhalten, mit der Ausnahme, dass die UA Zeilen brechen kann.

(Hervorhebung hinzugefügt)

Und in der Tat, wenn ich es zu ändern:

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

und

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

oder einfach:

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

funktioniert alles magisch.

Answer 2

nicht sicher, ob dies helfen würde, aber vielleicht könnten Sie dies versuchen:

#div { 
    white-space: pre; 
} 

Answer 3

here für eine Abhilfe Siehe:

Der Hack ist es, zuerst das Element zu klonen wollen Sie den Inhalt von, mit cloneNode().

Als Nächstes erstellen Sie ein <pre> Element mit createelement(), und dann geklonten Knoten anhängen.

Jetzt können Sie den inneren Text von diesem erstellen <pre> Element, und löschen Sie einfach die temporären Objekte. Sie haben jetzt Leerzeichen erhalten Text :)

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; 

Der Grund, warum ich das Element klonen ist, weil die appendChild() es aus dem DOM ziehen würde und es ist Schmerz die wieder einsetzen in der korrekten Position zurück im DOM.

Hoffentlich hilft dies ein paar Leute aus dort :)