Jquery .html() 和 .text() 删除 IE7 和 IE8 中的多余空格

Question

我在页面的 html 中存储了一段文本，如下所示。

<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>

然后我使用链接将上面的 HTML 放在输入字段中，供用户使用一些 jQuery 进行编辑

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

我已经在 IE7 中尝试了 $('#contentTextOriginal').html(); 和 $('#contentTextOriginal').text(); 但从 div 中删除一个空格。

所以文本显示为

“销售面积:560 平方英尺(52.02 平方米) _辅助存储:678 平方英尺(62.99 平方米)_ 独立卫生间/衣帽间 总计:1,238 平方英尺英尺(115.00 平方米)"

我需要做什么来确保 IE7 不会去除所有的空白区域？

我使用的是 markdown 编辑器，所以空白很重要，因为它包含一些格式信息。

适用于所有其他浏览器，但不适用于 IE7

Answer 1

问题是，从技术上讲，浏览器应该只在遇到一段空白时才渲染一个空格。因此，一系列空格和制表符将在内容中呈现一个空格。

通常为了防止这种情况你会使用:

white-space: pre;

保留所有空白。

问题是，即使您将此 CSS 应用于原始内容区域，它也不会在您复制内容时保留空白(尽管如果您显示隐藏内容，它会在显示中保留)。 Example on JS Fiddle .

也许您可以使用更多的数据格式来将数据存储在 DOM 中？

例如:

<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>

然后您可以随心所欲地使用这些数据...在 JSON website 的帮助下.

例如，您可以使用正确的输入创建一个表单(这只是一个示例，因此没有太多设计，它只是展示了可能的情况)。

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 .