jQuery text() call preserves newlines in Firefox but not in IE

Question

I'm doing:

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

on something like this:

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

Why the escaped content? Because it is sometimes malformed and I don't want it interfering with or breaking the rest of the document.

In FF it shows up preserving newlines. In IE7 it doesn't. I need to preserve the white space. This content is actually going in a textarea for editing.

And before anyone recommends a rich text editor, this code isn't really HTML. It's a custom dialect.

So how do I keep the newlines in IE?

Answer 1

It looks like this is my problem: The Internet Explorer innerHTML Quirk:

However, innerHTML has a problem in Internet Explorer.

The HTML standard requires a transformation on display of content. All kinds and amounts of adjacent whitespace are collapsed into a single space. This is a good thing - just as an example, it allows me to add a lot of line breaks into this source file without having to worry about weird line breaks in the displayed text.

Internet Explorer applies these transformations on assignment to the innerHTML property. This seems like a good idea: it saves a little time during display, because if the in-memory representation is already normalized, then the browser doesn't have to normalize whenever it needs to display the text.

There are exceptions to the normalization rule, though. Notably, these are the <textarea> element, the <pre> element and, in CSS-aware browsers, elements with any value but normal for the white-space property.

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.

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.

(emphasis added)

And indeed if I change it to:

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

and

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

or simply:

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

it all magically works.

Answer 2

Not sure if this would help, but maybe you could try this:

#div {
  white-space: pre;
}

Answer 3

See here for a workaround:

The hack is to first clone the element you want the contents of, using cloneNode().

Next you create a <pre> element with createElement(), and then append your cloned node to it.

Now you can get the innerText of that create <pre> element, and just delete the temporary objects. You now have whitespace preserved 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;

The reason I clone the element is because the appendChild() would pull it out of the DOM and it's pain the re-insert back at the correct position in the DOM.

Hopefully this helps a few people out there :)