Question

我在做：

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

就像这样：

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

为何逃脱内容？因为它有时会出现格式错误，我不希望它干扰或破坏文档的其余部分。

在FF中，它显示保留换行符。在IE7中它没有。我需要保留白色空间。这个内容实际上是在textarea中进行编辑。

在任何人推荐使用富文本编辑器之前，此代码实际上并不是HTML。这是一种习惯的方言。

那么如何在IE中保留换行符？

Answer 1

看起来这是我的问题：The Internet Explorer innerHTML Quirk：

但是，innerHTML存在问题   Internet Explorer。

HTML标准要求a   内容展示的转变。   相邻的各种类型和数量   空白被折叠成一个单一的空格   空间。这是一件好事 - 就像   一个例子，它允许我添加很多   换行到这个源文件   不必担心怪异   显示文字中的换行符。

Internet Explorer适用于这些   赋值转换   innerHTML属性。这似乎是一个   好主意：它节省了一点时间   在显示期间，因为如果   内存中的表示已经存在   规范化，然后浏览器没有   必要时必须规范化   显示文字。

有例外   但是，规范化规则。值得注意的是，   这些是＆lt; textarea＆gt;元素，   ＆LT;预＆GT;元素和，在CSS感知   浏览器，具有任何价值的元素但是   白色空间属性正常。

Internet Explorer不尊重   这些特殊情况。第三个是   他们的优化是一个坏主意，因为   空白区域可能会在运行时发生变化   例如通过DOM。在任何   例如，Internet Explorer将规范化   对innerHTML的所有赋值   财产，从而产生影响   演示如下。

此文字填写了页面上的textarea   加载。这也包含换行符   和多个空间。格式化是   保存在这里，除了   UA可能会打破界限。

（强调补充）

确实，如果我将其更改为：

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

和

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

或简单地说：

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

这一切都神奇地起作用。

Answer 2

不确定这是否会有所帮助，但也许你可以试试这个：

#div {
  white-space: pre;
}

Answer 3

请参阅here了解解决方法：

黑客是先克隆元素   你想要的内容，使用   cloneNode（）。

接下来，使用创建<pre>元素   createElement（），然后追加你的   克隆节点到它。

现在你可以得到那个的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中。

希望这可以帮助一些人   那里:)）

jQuery text（）调用在Firefox中保留换行符，但在IE中则不行

3 个答案: