jQuery text () Aufruf bewahrt Zeilenumbrüche in Firefox, aber nicht in IE
-
19-08-2019 - |
Frage
ich tue:
alert($("#div").text());
auf so etwas wie folgt aus:
<div id="div">
<div>
Some text
<div>
</div>
Warum der ausgetretene Inhalt? Weil es manchmal fehlerhaft ist, und ich will sie nicht zu stören oder den Rest des Dokuments zu brechen.
In FF zeigt es die Erhaltung Zeilenumbrüche auf. In IE7 ist es nicht. Ich brauche den weißen Raum zu bewahren. Dieser Inhalt wird in ein Textfeld für die Bearbeitung eigentlich vor sich geht.
Und bevor jemand einen Rich-Text-Editor empfiehlt, dieser Code ist nicht wirklich HTML. Es ist ein Brauch Dialekt.
Wie verhindere ich die Zeilenumbrüche in IE?
Lösung
Es sieht wie folgt aus ist mein Problem: Der Internet Explorer innerHTML- Quirk :
Allerdings hat innerHTML- ein Problem in Internet Explorer.
Der HTML-Standard erfordert ein Transformation auf Anzeige von Inhalten. Alle Arten und Mengen von benachbarten Leerzeichen sind kollabiert in einem einzigen . Space Dies ist eine gute Sache - so wie ein Beispiel, ermöglicht es mir viel hinzufügen Zeilenumbrüche in dieser Quelldatei ohne sich um komisch kümmern Zeilenumbrüche in dem angezeigten Text.
Internet Explorer gilt diese Transformationen auf die Zuordnung zu den innerHTML- Eigenschaft. Dies scheint ein gute Idee: es spart eine wenig Zeit während der Anzeige, weil, wenn die Darstellung in-Speicher ist bereits normalisiert, dann funktioniert der Browser nicht normalisieren müssen, wann immer es braucht, um Anzeige des Textes.
Es gibt Ausnahmen von der Normalisierungsregel, though. Vor allem, dies ist der
Internet Explorer nicht respektiert diese Sonderfälle. Die dritten Marken deren Optimierung eine schlechte Idee, weil white-space könnte zur Laufzeit ändern, zum Beispiel durch das DOM. In irgendeiner Fall, wird das Internet Explorer normalisiert alle Zuweisungen an die innerHTML- Eigenschaft, wodurch die Wirkung verursacht demonstriert unten.
Dieser Text füllt den Textbereich auf Seite Belastung. Auch dies enthält Zeilenumbrüche und mehrere Räume. Formatierung auch hier, außer dass konserviert der UA kann Linien brechen.
(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>
alles auf magische Weise funktioniert.
Andere Tipps
Nicht sicher, ob dies helfen würde, aber vielleicht könnten Sie versuchen, diese:
#div {
white-space: pre;
}
Siehe hier für dieses Problem zu umgehen:
Der Hack ist es, zuerst das Element zu klonen Sie möchten den Inhalt, mit cloneNode ().
Als nächstes erstellen Sie ein
<pre>
Element mit createelement (), und dann anhängen geklonten Knoten zu.Jetzt können Sie den Innertext davon bekommen
<pre>
Element erstellen und einfach löschen 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 klonen das Element weil die appendChild () würde ziehen es aus dem DOM und es ist Schmerz des Wiedereinsatz in der richtigen Position wieder im DOM.
Hoffentlich hilft dies ein paar Leute aus dort:)