JQuery text() вызывает сохранение новых строк в Firefox, но не в IE

Я делаю:

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

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

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

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

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

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

Итак, как мне сохранить символы новой строки в IE?

Ответы

Ответ 1

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

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

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

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

Существуют исключения из нормализации. Следует отметить, что это элемент <textarea> , <pre> , а в CSS-значении браузеров, элементов с любой стоимостью, но normal для свойства белого пространства.

Internet Explorer не уважает эти особые случаи. Третья делает их оптимизация - плохая идея, потому что пробел может измениться во время выполнения, например, через DOM. В любой случае Internet Explorer нормализует все назначения innerHTMLсвойства, что вызывает эффект как показано ниже.

Этот текст заполняет текстовое поле на странице нагрузки. Это также содержит разрывы строк и несколько пробелов. Форматирование здесь сохранилось, за исключением того, что UA может сломать линии.

(выделено курсивом)

И действительно, если я изменю его на:

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

и

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

или просто:

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

все это магически работает.

Ответ 2

Не уверен, что это поможет, но, возможно, вы можете попробовать следующее:

#div {
  white-space: pre;
}

Ответ 3

Смотрите здесь для обходного пути:

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

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

Теперь вы можете получить innerText этого создайте элемент <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, и это больно вернуть обратно в правильное положение в DOM.

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