Jquery .html() and .text() removing extra whitespace in IE7 & IE8

Question

I have a piece of text stored in the html of the page as seen below.

<div id="contentTextOriginal" style="display: none;">
_Sales Area: 560 sq ft (52.02 m²)_ _Ancillary storage: 678 sq ft (62.99 m2)_ _Separate W.C./Cloakroom_ 

**Total: 1,238 sq ft (115.00 m2)**</div>

I am then using a link to place the HTML above in a input field for the user to edit using some jQuery

   var textToEdit = $('#contentTextOriginal').text();
   $('.editorTextBox').val(textToEdit);

I have tried both $('#contentTextOriginal').html(); and $('#contentTextOriginal').text(); in IE7 all but a single space is stripped from the div.

So the text is then displayed as

"Sales Area: 560 sq ft (52.02 m²) _Ancillary storage: 678 sq ft (62.99 m2)_ Separate W.C./Cloakroom Total: 1,238 sq ft (115.00 m2)"

what do i need to do to make sure IE7 dosn't strip out all the white space?

I am using a markdown editor so the white space is important as it holds some of the formatting information.

Works in every other browser, just not IE7

Answer 1

The problem is that technically, browsers are only supposed to render a space when they encounter a run of white-space. So a series of spaces and tabs will render a single space in the content.

Normally to prevent this you would use:

white-space: pre;

To preserve all white space.

The problem is that even if you apply this CSS to the original content area, it doesn't preserve the white-space when you copy the content (although it does in the display if you show the hidden content). Example on JS Fiddle.

Perhaps you could use more of a data-format to store the data in the DOM?

For example:

<div id="contentTextOriginal" style="display: none;">
{ 
    salesArea: "560 sq ft (52.02 m²)", 
    ancillaryStorage: "678 sq ft (62.99 m2)", 
    notes: "separate W.C./Cloakroom",
    total: "1,238 sq ft (115.00 m2)"
}</div>

You can then use this data to be as clever as you like... with some help from the JSON website.

For example, you could create a form with the correct inputs (this is just an example, so there isn't much design, it just shows what is possible).

var originalContent = $("#contentTextOriginal").text();
var jsonData = eval('(' + originalContent + ')');

var dynamicForm = '';
for (var key in jsonData) {
  if (jsonData.hasOwnProperty(key)) {
    dynamicForm += '<p><label>' + key  + '<br><input type="text" value="'  + jsonData[key] + '" name="'  + key  + '" size="40"></label></p>';
  }
}

$("#contentTextOriginal").after(dynamicForm);

See this example in action.

Answer 2

Thanks to wescrow and Sohnee for pointing me in the right direction to why this is happening.

In IE7 & IE8 using the code

$('#contentTextOriginal').html(); or $('#contentTextOriginal').text();

Will mean IE7 & IE8 stripping out any formatting, extra spaces / returns regardless of if the item is set correctly e.g. pre, white-space css.

The only way i could get round this was to use the function

document.getElementById('contentTextOriginal').innerText;

But this innerText is not supported in any other standard compliant browser FF/Chrome.

So I have hasd to put some condition JS in use inner text for IE8 and below and the jQuery for everything else.

Something like this will work.

    <script type="text/javascript">
        var i_am_old_ie = false;
    </script>
    <!--[if LT IE  8]>
    <script type="text/javascript">
            i_am_old_ie = true;
    </script>
    <![endif]-->

    if (i_am_old_ie) {
       textToEdit = document.getElementById('contentTextOriginal' + id).innerText;
    } else {
       textToEdit = $('#contentTextOriginal' + id).html();
    }

I hate using conditional scripts if anyone can think of another way I would be most grateful.

Answer 3

It looks like this problem is known with IE7: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html I don't think there is a fix for it (at least for textareas). For pre tags (which suffered from the same bug) you could insert <br /> tags. Maybe you could try that.