Вызов jQuery text () сохраняет переводы строк в Firefox, но не в IE

Question

Я делаю:

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

примерно так:

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

Почему экранированный контент? Потому что иногда он искажен, и я не хочу, чтобы он мешал или нарушал остальную часть документа.

В FF это показывает сохранение новых строк. В IE7 это не так. Мне нужно сохранить белое пространство. Этот контент фактически отправляется в текстовую область для редактирования.

И прежде чем кто-либо порекомендует текстовый редактор, этот код на самом деле не является HTML. Это собственный диалект.

Так как мне сохранить переводы строк в IE?

Answer 1

Похоже, это моя проблема: Internet Explorer innerHTML Quirk :

Однако, у innerHTML есть проблема в Internet Explorer.

Стандарт HTML требует преобразование на показе контента. Все виды и количества смежных пробелы свернуты в единый пробел. Это хорошо - так же, как Например, это позволяет мне добавить много разрывов строк в этом исходном файле не беспокоясь о странных разрывы строк в отображаемом тексте.

Internet Explorer применяет эти преобразования при назначении на свойство innerHTML. Это похоже на хорошая идея: это экономит немного времени во время отображения, потому что если представление в памяти уже нормализуется, то браузер не должны нормализовать всякий раз, когда это необходимо отобразить текст.

Есть исключения из Правило нормализации, хотя. Следует отметить, что это элемент, element and, in CSS-aware browsers, elements with any value but normal for the white-space property.</p> <p>Internet Explorer does not respect these special cases. The third makes their optimization a bad idea, because white-space might change at runtime, for example through the DOM. In any case, Internet Explorer will normalize all assignments to the innerHTML property, thus causing the effect demonstrated below.</p> <p>This text fills the textarea at page load. This, too, contains line breaks and multiple spaces. Formatting is preserved here as well, except that the UA may break lines.</p> </blockquote> <p>(emphasis added)</p> <p>And indeed if I change it to:</p> <pre><code><div id="div"> <pre> ... и

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

или просто:

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

все это волшебным образом работает.

Answer 2

Не уверен, что это поможет, но, возможно, вы могли бы попробовать это:

#div {
  white-space: pre;
}

Answer 3

См. здесь для обхода:

Взломать это сначала клонировать элемент Вы хотите содержимое, используя cloneNode ().

Далее вы создаете элемент <pre> с createElement (), а затем добавьте свой клонированный узел к нему.

Теперь вы можете получить внутренний текст этого создать элемент <pre> и просто удалить временные объекты. Теперь у вас есть сохраненный пробел текст:)

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;

Причина, по которой я клонирую элемент потому что appendChild () будет тянуть это из DOM, и это боль вставьте обратно в правильное положение в ДОМ.

Надеюсь, это поможет нескольким людям там :) 1017 *